How to Use Syncfusion’s React Rich Text Editor with React Redux Form
Tags: react, javascript, webdev, productivity
Published: 2020-08-25 12:25:13

---
title: How to Use Syncfusion’s React Rich Text Editor with React Redux Form
published: true
date: 2020-08-25 11:27:38 UTC
tags: react, javascript, webdev, productivity
canonical_url: https://www.syncfusion.com/blogs/post/how-to-use-syncfusions-react-rich-text-editor-with-react-redux-form.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/How-to-Use-Syncfusion%E2%80%99s-React-Rich-Text-Editor-with-React-Redux-Form-672x372.jpg
---

The Syncfusion React [Rich Text Editor](https://www.syncfusion.com/react-ui-components/react-wysiwyg-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?](#what-is-redux-form?)
- [Getting started with create-react-app](#getting-started-with-create-react-app)
- [Configuring the Syncfusion React Rich Text Editor component](#configuring-the-syncfusion-react-rich-text-editor-component)
- [Create a redux store](#create-a-redux-store)
- [Create an RteForm.js file](#create-an-rteform.js-file)
- [Integrate the Rich Text Editor form into a React component](#integrate-the-rich-text-editor-form-into-a-react-component)
- [Resources](#resources)

## What is Redux Form?

[Redux](https://redux.js.org/) is an open-source JavaScript library. It is used to develop UI components in React and Angular platforms. [redux -form](https://redux-form.com/) 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](https://redux-form.com/8.3.0/docs/gettingstarted.md/) 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](https://www.npmjs.com/package/create-react-app) command to install the NuGet package globally that we will use to create a basic React application.

`npm i create-react-app -g`

You can [create the app](https://create-react-app.dev/docs/getting-started/) 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****.**

`create-react-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.

`cd RichTextEditor-Redux-Form
npm start` 

![The React application](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/The-React-application.png)

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.

`npm install ej2-react-richtexteditor`

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

`npm i --save-dev redux react-redux redux-form`

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.

```js
// 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.

![Rich Text Editor Events](https://dev-to-uploads.s3.amazonaws.com/i/lykbz3ya303g2l3jwap2.png)

Refer to the following code.

```js
//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.

```js
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.  
 ![Redux Form validation with RichTextEditor in the browser console](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Redux-Form-validation-with-Rich-Text-Editor-in-the-browser-console.png)

## Resources

You can check out the complete project from this [GitHub](https://github.com/thangavele/RichTextEditor-Redux-Form) repository.

## Conclusion

I hope you now have a clear idea of how to add the [Syncfusion React Rich Text Editor](https://www.syncfusion.com/react-ui-components/react-wysiwyg-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](https://www.syncfusion.com/downloads). You can also explore our [online demo](https://ej2.syncfusion.com/react/demos/#/material/rich-text-editor/tools) and our [documentation](https://ej2.syncfusion.com/react/documentation/rich-text-editor/).

You can contact us through our [support forums](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/), or [feedback portal](https://www.syncfusion.com/feedback/). We are always happy to assist you!