How to Use Rich Text Editor in React

In this lesson, we will see how to use a rich text editor in React. Let's assume that we have a component for adding articles and we want to add a rich text editor to make users store articles.

Install the package

First, let's install the package we need.

npm i react-quill

Display the rich text editor

Next, inside the component, we use the React Quill component to display the rich text editor.

import React, { useState } from 'react'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'

export default function Write() {
    const [article, setArticle] = useState({
        title: '',
        body: ''
    })

    const modules = {
        toolbar: [
          [{ 'header': [1, 2, false] }],
          ['bold', 'italic', 'underline','strike', 'blockquote'],
          [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
          ['link', 'image', 'code-block'],
          ['clean']
        ]
    }

    const storeArticle = async (e) => {
        e.preventDefault()
        console.log(article)
    }


    return (
        <div className='container'>
            <div className="row my-5">
                <div className="col-md-6 mx-auto">
                    <div className="card shadow-sm">
                        <div className="card-header bg-white">
                            <h5 className="text-center mt-2">
                                Add new article
                            </h5>
                        </div>
                        <div className="card-body">
                            <form className="mt-5" onSubmit={(e) => storeArticle(e)}>
                                <div className="mb-3">
                                    <label htmlFor="title" 
                                        className='form-label'>Title*</label>
                                    <input type="text" name="title" id="title"
                                        className='form-control'
                                        onChange={(e) => setArticle({
                                            ...article, title: e.target.value
                                        })}
                                    />
                                </div>
                                <div className="mb-3">
                                    <label htmlFor="body" 
                                        className='form-label'>Body*</label>
                                        <ReactQuill theme="snow" 
                                            modules={modules}
                                            value={article.body} 
                                            onChange={(data) => setArticle({
                                                ...article, body: data
                                            })} 
                                        />
                                </div>
                                <div className="mb-3">  
                                    <button type="submit"
                                        className='btn btn-sm btn-dark'>
                                        Submit
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}