{"id":11836,"library":"react-quill","title":"React Quill Component","description":"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.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/zenoamaro/react-quill","tags":["javascript","react","react-component","rich","text","rich-text","textarea","quill","typescript"],"install":[{"cmd":"npm install react-quill","lang":"bash","label":"npm"},{"cmd":"yarn add react-quill","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-quill","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for the React component.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Primary component export, which is a default export. As of v2, fully TypeScript typed.","wrong":"import { ReactQuill } from 'react-quill';","symbol":"ReactQuill","correct":"import ReactQuill from 'react-quill';"},{"note":"Required CSS theme for the editor and toolbar. Ensure your bundler is configured to handle CSS imports.","symbol":"quill.snow.css","correct":"import 'react-quill/dist/quill.snow.css';"},{"note":"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`.","wrong":"import { Delta } from 'quill';","symbol":"Delta","correct":"import type { Delta } from 'react-quill';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactQuill from 'react-quill';\nimport 'react-quill/dist/quill.snow.css';\n\nfunction MyComponent() {\n  const [value, setValue] = useState('');\n\n  return (\n    <div style={{ height: '300px', display: 'flex', flexDirection: 'column' }}>\n      <h3>ReactQuill Editor</h3>\n      <ReactQuill \n        theme=\"snow\" \n        value={value} \n        onChange={setValue} \n        style={{ flexGrow: 1, overflowY: 'auto' }} \n        placeholder=\"Start typing here...\"\n      />\n      <p>Current content length: {value.length}</p>\n    </div>\n  );\n}","lang":"typescript","description":"Demonstrates a basic controlled `ReactQuill` component using the 'snow' theme, managing editor content with React's `useState` hook."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"*"},{"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`).","message":"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.","severity":"gotcha","affected_versions":"*"},{"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.","message":"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).","severity":"breaking","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install `css-loader` and `style-loader` (or equivalent) via npm and configure your Webpack (or similar) setup to process `.css` files.","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.","error":"Module not found: Can't resolve 'react-quill/dist/quill.snow.css' in '...' "},{"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();`","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.","error":"TypeError: Cannot read properties of undefined (reading 'getEditor')"},{"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.","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.","error":"Editor content resets unexpectedly or changes are lost."}],"ecosystem":"npm"}