How to Use Syncfusion’s React Rich Text Editor with React Redux Form

The Syncfusion React Rich Text Editor component is a WYSIWYG editor component that can be used to frame a UI form control. It works seamlessly with React Redux Form and can validate inputs in form fields.

This blog explains the procedure to merge our Rich Text Editor component with Redux Form fields to validate inputs. The following topics are covered in this blog:

• What is Redux Form?
• Getting started with create-react-app
• Configuring the Syncfusion React Rich Text Editor component
• Create a redux store
• Create an RteForm.js file
• Integrate the Rich Text Editor form into a React component
• Resources

What is Redux Form?

Redux is an open-source JavaScript library. It is used to develop UI components in React and Angular platforms. redux -form is a validation library that can be integrated into any React web application easily. It uses the Redux library to store field input values and higher-order components.

Refer to the redux-form documentation page to get more information.

Now, let’s see how to create a React app with Redux and integrate our React Rich Text Editor within it.

Getting started with create-react-app

To create a React application, follow these steps:

Step 1: Use the create-react-app command to install the NuGet package globally that we will use to create a basic React application.

You can create the app in any directory by using the create-react-app command.

Step 2: Move to the directory where you want to create the application and run the following command. Here, I am naming this app RichTextEditor-Redux-Form.

Thus, we have created the application.

Step 3: To run the application with default configuration, move to the application’s directory and use the following command.

With this, we have created the base application and made it run.

Configuring the Syncfusion React Rich Text Editor component

Run the following command to install the NuGet package needed to configure the React application with the Syncfusion React Rich Text Editor.

The following command will install Redux and its dependent packages along with redux-form to validate inputs with a custom React component.

Now, we have completed the required configuration.

Create a Redux store

Create a store with combineReducers and pass it through the Provider component in the index.js file. Refer to the following code example.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { reducer as formReducer } from 'redux-form';
import App from './App';

const rootReducer = combineReducers({
    form: formReducer
});

const store = createStore(rootReducer);

ReactDOM.render(
<Provider store={store}>
 <App />
</Provider>
,document.getElementById('root'));

Create an RteForm.js file

After creating the Redux store, create an RteForm.js file inside the src directory and merge the Rich Text Editor component within the Field input to communicate with the redux store and pass it with reduxForm.

RteForm will provide the Redux Form states and functions to handle the submission process and show the validation message in a label.

To validate the Rich Text Editor component within Redux Form, map the following field input event handlers to the events of the Rich Text Editor.

Refer to the following code.

//RteForm.js 
import React from ‘react’;
import { Field, reduxForm } from ‘redux-form’;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from ‘@syncfusion/ej2-react-richtexteditor’;

const validate = values => {
  const errors = {}
  if (values.comment && values.comment.length < 20) {
    errors.comment = ‘Minimum be 20 characters or more’;
  } else if (!values.comment) {
    errors.comment = ‘Required’;
  } else {
    errors.comment = false;
  }
  return errors
}

const renderRTEField = ({ input, label, type, meta: { touched, error, warning } }) => (
  <div>
    <label className=”control-label”>{label}</label>
    <div>
      <RichTextEditorComponent htmlAttributes={{ name: “comment” }} value={input.value}
        change={param => input.onChange(param.value)} focus={param => input.onFocus()} blur={param => input.onBlur()} id=”defaultRTE”>
        <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
      </RichTextEditorComponent>
      {touched && ((error && <span className=”text-danger”>{error}</span>) || (warning && <span>{warning}</span>))}
    </div>
  </div>
)

let RteForm = props => {
  const { handleSubmit, pristine, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div className=”form-group”>
        <Field name=”comment” component={renderRTEField} label=”Comment” />
      </div>
      <div className=”form-group”>
        <button type=”submit” disabled={pristine || submitting} className=”btn btn-primary”>Submit</button>
      </div>
    </form>
  )
}
RteForm = reduxForm({
  form: ‘contact’,
  validate,
})(RteForm);

export default RteForm;

Now, the RteForm.js file will act as a React web form component with a Redux Form field. The validation in this form field will be done by the Rich Text Editor component.

Integrate the Rich Text Editor form into a React component

Refer to the following code to integrate the Rich Text Editor form into a React component.

import React from 'react';
import RteForm from './RteForm';

class App extends React.Component {
  submit = (values) => {
    alert("Form values submitted");
    console.log(values);
  }
  render() {
    return (
      <div className="container">
        <h3>Redux Form Validation with RichTextEditor</h3>
        <RteForm onSubmit={this.submit} />
      </div>
      
    )
  }
}

export default App;

Now, the Rich Text Editor component is ready to use in the Redux Form with validation. I am going to run the application and then switch to the browser to see the Rich Text Editor component inside the form.

In the application, enter a value in the form field and click on the Submit button. The value will be validated by the Rich Text Editor and will show you the validation message if the entered value is fewer than 20 characters.

Resources

You can check out the complete project from this GitHub repository.

Conclusion

I hope you now have a clear idea of how to add the Syncfusion React Rich Text Editor component inside a Redux Form for validation. We look forward to you trying out this integration and hope you provide feedback in the comments section below.

If you are new to Syncfusion, try our control’s features by downloading a free trial. You can also explore our online demo and our documentation.

You can contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!