How to Change 'Enter Text' Placeholder in React Image Editor?

This article explains how to customize the default placeholder text “Enter Text” that appears when adding a text annotation in an React Image Editor component.

Change ‘Enter Text’ Placeholder in React Image Editor

To change the default placeholder text in the image editor component, you can handle the shapeChanging event, which is triggered whenever a shape (such as a text annotation) is being added or modified. This event provides access to the shape’s current settings through the args object. Specifically, args.currentShapeSettings.text holds the text content of the shape.

By checking if the current text equals “Enter Text”, you can replace it with your desired custom placeholder. This ensures that whenever a new text shape is added with the default placeholder, it is automatically replaced with your custom text (in this case, “Type here”). You can modify the replacement string to suit your application’s context, such as “Add your caption” or “Type here”.

Code Example

const shapeChanging = (args) => {
   if (args?.currentShapeSettings?.text === 'Enter Text') {
     args.currentShapeSettings.text = 'Type here';
   }
 };
  return (
           <div className="e-img-editor-sample">
             <ImageEditorComponent
               id="image-editor"
               ref={imgObj}
               created={imageEditorCreated}
               shapeChanging={shapeChanging}
             ></ImageEditorComponent>
           </div>
 );

Output

Sample

View in StackBlitz Sample

Conclusion

I hope you enjoyed learning about how to change “Enter Text” placeholder in React Image Editor.

You can refer to our React Image Editor’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our React Image Editor Documentation to understand how to present and manipulate data.

For current customers, you can check out our React components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our React Image Editor and other React components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!