How to Integrate Quill.js in a React Application

Published : 25 December 2024
Updated : 05 January 2025

186 Views

React Architecture Application Design Quill.Js

Quill.js is a popular widely-used open-source WYSIWYG (What You See Is What You Get) rich text editor. It’s known for it's flexibility, extensibility and a great user experience. In this article , we will walk through the process of integrating Quill.js into your React application step by step. After understanding this article you will be able to integarate Quill.js in your react application easily without any problem with his adavance features

Step 1 :- Install Quill and React-Quill

First step of integrating Quill.js in react is to install Quill.js and React-Quill (a React wrapper for Quill).

npm install react-quill
npm install quill

This will install both react-quill and quill dependencies in your react application. React-Quill is the wrapper that makes it easier to integrate Quill.js with React components.

Step 2 :- Basic Setup of React-Quill

After installing dependencies, you can import ReactQuill into your component.

Create a new file TextEditor.js and import ReactQuill

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

const TextEditor = () => {
    const [editorValue, setEditorValue] = useState('');
    const handleEditorChange = (value) => {
        setEditorValue(value);
    };
    return (
        <div>
            <ReactQuill
                value={editorValue}
                onChange={handleEditorChange.bind(this)}
                theme="snow"
            />
            <hr />
            <h2>Content View</h2>
            <div 
                dangerouslySetInnerHTML={{ __html: editorValue }}
            />
        </div>
    );
};

export default TextEditor;

Step 3 :- Use React-Quill in Application

Once you have this basic setup, you can now use the TextEditor component anywhere in your application.

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

function OtherComponent() {
  return (
    <div>
      <h1>React Quill Example</h1>
      <TextEditor />
    </div>
  );
}

export default OtherComponent;

Note :- You can directly use ReactQuill in you application any where but its recommended to create a basic setup (like a TextEditor component) for for better scalability and readability.

Step 4 :- Customize the Quill Toolbar

By default, Quill comes with a basic toolbar for text formatting as per your requirement you can easily customize this toolbar to fullfill your needs.

const modules = {
        toolbar: [
            [{ 'header': '1' }, { 'header': '2' }, { 'font': [] }],
            [{ 'size': ['small', 'medium', 'large', 'huge'] }],
            ['bold', 'italic', 'underline'],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'align': [] }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            ['link'],
            ['blockquote'],
            ['code-block'],
            ['image'],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],
            ['clean'],
        ],
    };

<ReactQuill
     value={editorValue}
     onChange={handleEditorChange.bind(this)}
     theme="snow"
     modules={modules}
 />

Step 5 :- Adding Customize in TextEditor

After adding customization in toolbar you TextEditor.js will be

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

const TextEditor = () => {
    const [editorValue, setEditorValue] = useState('');
    const handleEditorChange = (value) => {
        setEditorValue(value);
    };
const modules = {
        toolbar: [
            [{ 'header': '1' }, { 'header': '2' }, { 'font': [] }],
            [{ 'size': ['small', 'medium', 'large', 'huge'] }],
            ['bold', 'italic', 'underline'],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'align': [] }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            ['link'],
            ['blockquote'],
            ['code-block'],
            ['image'],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],
            ['clean'],
        ],
    };
    return (
        <div>
            <ReactQuill
                value={editorValue}
                onChange={handleEditorChange.bind(this)}
                theme="snow"
                modules={modules}
            />
            <hr />
            <h2>Content View</h2>
            <div 
                dangerouslySetInnerHTML={{ __html: editorValue }}
            />
        </div>
    );
};

export default TextEditor;

Conclusion

Integrating Quill.js into a React application is a simple process that provides a highly customizable and powerful text editor. By following the steps in this article, you will be able to set up a basic editor and customize the toolbar to fit the needs of your application.