react-quill

library2.0.0jsnpmunverified

React-Quill is a robust React component that wraps the popular Quill rich-text editor, allowing developers to easily integrate a powerful WYSIWYG editing experience into their React applications. The current stable version is 2.0.0, which introduced a full TypeScript port, React 16+ compatibility, and a refactored build system, aiming for a drop-in upgrade for most users. While major releases, like v2, occur periodically with significant overhauls, the project generally maintains an active development pace with bug fixes and minor improvements. A key differentiator is its seamless integration with React's component lifecycle, abstracting away much of Quill's imperative API. It supports controlled mode with specific caveats, leveraging Quill's Delta format for content management and offering extensive customization options for toolbars and formats. It is designed to be highly extensible and performant within a React ecosystem, making it a go-to choice for rich-text editing needs.

web-framework

npm install react-quill

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-QUILL

react-quill

web-frameworkjavascriptv2.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ReactQuill

✓ import ReactQuill from 'react-quill';

✗ 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

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

✗ import { Delta } from '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`.

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> ); }

Debug

Known issues

breakingReactQuill 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.

affects: >=2.0.0

gotchaDue 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.

affects: *

gotchaThe `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`).

affects: *

breakingReactQuill 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.

affects: >=2.0.0

Errors

Common errors & fixes

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

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')

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.

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.

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for the React component.

react-domrequiredPeer dependency required for rendering React components to the DOM.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/zenoamaro/react-quill ↗

packagehttps://www.npmjs.com/package/react-quill ↗