Getting Started with Quill in React

Learn how to set up and use Quill, a powerful rich text editor, in a React app. Discover the steps for installing and importing Quill and how to customize its appearance and features to meet your needs.

Getting Started with Quill in React
Photo by Lautaro Andreani / Unsplash

Quill is a powerful open-source rich text editor that can be easily integrated into a React app. In this guide, we'll go over the steps for setting up Quill in a React project and how to use its basic features.

To get started with Quill in React, you'll need to install the quill and react-quill libraries. You can do this using npm or yarn by running the following command:

npm install quill react-quill

Once the libraries are installed, you can import them into your React component and use the ReactQuill component to create a Quill editor. Here's an example of how you might do this:

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

function MyEditor() {
  const [editorValue, setEditorValue] = useState('');

  return (
      onChange={(value) => setEditorValue(value)}

In this example, we're using
the useState hook to manage the state of the Quill editor. The value of the editor is stored in the editorValue state variable and is passed to the ReactQuill component as a prop. We also define an onChange handler for the ReactQuill component that updates the editorValue state variable with the new value of the editor whenever it changes.

Quill also provides a number of customization options that you can use to control the appearance and behavior of the editor. For example, you can use the modules prop to enable or disable specific features, such as the toolbar or image uploader. You can also use the theme prop to change the appearance of the editor, such as using the 'snow' theme shown in the example above or the 'bubble' theme.

  onChange={(value) => setEditorValue(value)}
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']

In this example, we're using the modules prop to customize the toolbar and enable the header, bold, italic, underline, image, and code-block buttons. We're also using the theme prop to apply the 'snow' theme to the editor.

Quill is a powerful rich text editor that can be easily integrated into a React app. By following the steps outlined in this guide, you should now be able to set up Quill in your project and start using its basic features. With its wide range of customization options, Quill is a great choice for any project that requires a rich text editor.