React Quill Component

Common errors

• Module not found: Can't resolve 'react-quill/dist/quill.snow.css' in '...' 

  cause Webpack or other bundler cannot find the CSS file, typically because a CSS loader (like `css-loader` and `style-loader`) is missing or misconfigured in the project's build setup.
  fix Install `css-loader` and `style-loader` (or equivalent) via npm and configure your Webpack (or similar) setup to process `.css` files.

• TypeError: Cannot read properties of undefined (reading 'getEditor')

  cause Attempting to call `getEditor()` on a `ReactQuill` instance that hasn't mounted yet, or calling it on a ref that isn't connected to the component.
  fix Ensure you are accessing the `getEditor()` method via a React ref to the `ReactQuill` component only after the component has mounted. Example: `const quillRef = useRef(null); // ... <ReactQuill ref={quillRef} ... /> // ... quillRef.current?.getEditor();`

• Editor content resets unexpectedly or changes are lost.

  cause This often occurs due to the hybrid controlled/uncontrolled nature of `ReactQuill`. If the `value` prop is updated asynchronously or with a value that doesn't reflect Quill's true internal state, Quill's internal state might be overridden, leading to perceived data loss or jumps.
  fix Always update the `value` prop synchronously within the `onChange` handler. If external state updates are needed, ensure they are merged carefully with the editor's current Delta state. For complex scenarios, consider using the `key` prop to force a re-render of the editor if external state requires a full reset.

Warnings

• breaking ReactQuill v2 removed support for long-deprecated props, the `ReactQuill Mixin`, and the `Toolbar` component. Applications upgrading from v1 or older might encounter breaking changes if these features were in use.
  Fix: Migrate usage to modern React patterns, remove references to `ReactQuill Mixin`, and implement custom toolbars using standard React components instead of the removed `Toolbar` component. Refer to the official v2 migration guide.
• gotcha Due to Quill's internal handling of its state, `ReactQuill` operates in a hybrid controlled/uncontrolled mode. While it accepts a `value` prop and `onChange` handler, it cannot prevent internal Quill edits. The `value` prop will override content if it differs from the internal state, potentially causing unexpected behavior or loss of user input if not managed carefully.
  Fix: Ensure `value` updates are managed synchronously with `onChange` callbacks. Avoid asynchronous `value` updates that might conflict with Quill's internal state. For advanced control, consider using the `getEditor()` method to interact directly with the Quill instance and its Delta API.
• gotcha The `ReactQuill` component requires specific CSS themes (e.g., `quill.snow.css`) to be imported and loaded for proper styling and functionality of the editor and its toolbar. Without these styles, the editor may appear unstyled or non-functional.
  Fix: Import the desired Quill theme CSS (e.g., `import 'react-quill/dist/quill.snow.css';`) in your application. Ensure your build system (e.g., Webpack) is configured to handle CSS imports correctly (e.g., using `style-loader` and `css-loader`).
• breaking ReactQuill v2 requires React 16, 17, or 18 as peer dependencies. Applications using older React versions (e.g., React 15 or earlier) must upgrade their React installation or use an older `react-quill` version (e.g., v1.x).
  Fix: Upgrade your project's `react` and `react-dom` packages to version 16, 17, or 18. If upgrading React is not feasible, consider using an older `react-quill` version compatible with your React setup.

Install

• npm install react-quill npm
• yarn add react-quill yarn
• pnpm add react-quill pnpm

Imports

• ReactQuill
  wrong:

  import { ReactQuill } from 'react-quill';

  correct:

  import ReactQuill from 'react-quill';

  Primary component export, which is a default export. As of v2, fully TypeScript typed.
• quill.snow.css

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

  Required CSS theme for the editor and toolbar. Ensure your bundler is configured to handle CSS imports.
• Delta
  wrong:

  import { Delta } from 'quill';

  correct:

  import type { Delta } from 'react-quill';

  Importing Quill's Delta type for managing editor content state, particularly useful when working with `onChange` events and the `value` prop in TypeScript. Re-exported from `quill` by `react-quill`.

Quickstart

Demonstrates a basic controlled `ReactQuill` component using the 'snow' theme, managing editor content with React's `useState` hook.

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

function MyComponent() {
  const [value, setValue] = useState('');

  return (
    <div style={{ height: '300px', display: 'flex', flexDirection: 'column' }}>
      <h3>ReactQuill Editor</h3>
      <ReactQuill 
        theme="snow" 
        value={value} 
        onChange={setValue} 
        style={{ flexGrow: 1, overflowY: 'auto' }} 
        placeholder="Start typing here..."
      />
      <p>Current content length: {value.length}</p>
    </div>
  );
}