React Quill | the best free React Rich text editor

 While developers work in React environments, they often need to use various input fields. They often use those input fields to take input about ID, password, and many more values. But in some cases, those input fields are not getting enough. Because they need to take input some HTML, CSS-styled rich text from the user. In this case, we need to use Rich Text Editor. However, introducing React Quill is a typical but free rich text editor. But if you will configure this little boy, it will be a beast. Let’s check how you will able to do this.

Configure React Quill to get the best Rich text editor service

On the basic installation, react Quill will not work fine. After using the basic setup by following npmjs.com, you will have a fundamental formation. You already have installed the React app and the Quill on your computer. Now follow all those things step by step below.

Step 1: Remove the restriction mode of react

Usually, after installing the react app there, you will find the Root component (index.js) is wrapped by a restriction, which is pretty much like this –

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

Now listen carefully, Quill and other rich text editors do not work well with the restriction mode. This is the reason we should turn it off at the very beginning. just replace this by -

root.render(<App />)

 

Step 2: Adding all important header file

React Quill demands its CSS file. Along with the CSS, you also need to have other dependencies. Ensure you are importing all of those properly before making the main component.

import React, { useState } from "react";

import ReactQuill from "react-quill";

import "react-quill/dist/quill.snow.css";

 

Step 3: Making the main component

Now here we are going to make the root component of the Quill. All the root component is divided by the module and format settings. There is some extra feature Quill provides where you can add some custom options. We are not going to show that.

function Editor() {

    const modules = {
        toolbar: [
            [{ 'font': [] }],
            [{ header: [1, 2, 3, false] }],
            ["bold", "italic", "underline", "strike", "blockquote"],
            [
                { list: "ordered" },
                { list: "bullet" },
                { indent: "-1" },
                { indent: "+1" },
            ],
            // ["link", "image"],
            ["link"],
            [{ align: [] }, { color: [] }, { background: [] }], // dropdown with defaults from theme
            ["clean"],
        ],

    };

    const formats = [
        "font",
        "header",
        "bold",
        "italic",
        "underline",
        "strike",
        "blockquote",
        "list",
        "bullet",
        "indent",
        "link",
        "align",
        "color",
        "background",
    ];
    const [value, setValue] = useState("");

    const handleChange=()=>{
        console.log(value)
    }

    return (
        <>
            <div>
                <ReactQuill
                    theme="snow"
                    modules={modules}
                    formats={formats}
                    value={value}
                    onChange={(event)=>setValue(event)}
                />
            </div>
            <button onClick={handleChange}>click</button>
        </>
    );
}



export default Editor;

Caution: Never use defaultValue and value props at the same time in React Quill. Unless this can hurt your system or occur error. 

That’s all to make the text editor. There is no doubt that React Quill is the best free text editor you will ever have. There are other free text editors like draft.js and others. Those are pretty hard to install, and most of beginners are not able to use those. This is why I always suggest people use quill if they are new in React.