A Quill component for React.
2025 Note
You probably don't need this library to use Quill with React. See https://quilljs.com/playground/react
This is the documentation for ReactQuill v2 — Previous releases: v1
ReactQuill v2
ReactQuill 2 is here, baby! And it brings a full port to TypeScript and React 16+, a refactored build system, and a general tightening of the internal logic.
We worked hard to avoid introducing any behavioral changes. For the vast majority of the cases, no migration is necessary at all. However, support for long-deprecated props, the ReactQuill Mixin, and the Toolbar component have been removed. Be sure to read the migration guide.
We expect this release to be a drop-in upgrade – if that isn't the case, please file an issue with the v2 label.
Make sure you have react and react-dom, and some way to load styles, like style-loader. See the documentation on themes for more information.
npm install react-quill --save
import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
function MyComponent() {
const [value, setValue] = useState('');
return <ReactQuill theme="snow" value={value} onChange={setValue} />;
}
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/quill.snow.css"
/>
<script
src="https://unpkg.com/react@16/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/[email protected]/dist/react-quill.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel" src="/my-scripts.js"></script>
In controlled mode, components are supposed to prevent local stateful changes, and instead only have them happen through onChange and value.
Because Quill handles its own changes, and does not allow preventing edits, ReactQuill has to settle for a hybrid between controlled and uncontrolled mode. It can't prevent the change, but will still override the content whenever value differs from current state.
If you frequently need to manipulate the DOM or use the Quill APIs imperatively, you might consider switching to fully uncontrolled mode. ReactQuill will initialize the editor using defaultValue, but won't try to reset it after that. The onChange callback will still work as expected.
Read more about uncontrolled components in the React docs.
You can pass a Quill Delta, instead of an HTML string, as the value and defaultValue properties. Deltas have a number of advantages over HTML strings, so you might want use them instead. Be aware, however, that comparing Deltas for changes is more expensive than comparing HTML strings, so it might be worth to profile your usage patterns.
Note that switching value from an HTML string to a Delta, or vice-versa, will trigger a change, regardless of whether they represent the same document, so you might want to stick to a format and keep using it consistently throughout.
⚠️ Do not use the delta object you receive from the onChange event as value. This object does not contain the full document, but only the last modifications, and doing so will most likely trigger an infinite loop where the same changes are applied over and over again. Use editor.getContents() during the event to obtain a Delta of the full document instead. ReactQuill will prevent you from making such a mistake, however if you are absolutely sure that this is what you want, you can pass the object through new Delta() again to un-taint it.
The Quill editor supports themes. It includes a full-fledged theme, called snow, that is Quill's standard appearance, and a bubble theme that is similar to the inline editor on Medium. At the very least, the core theme must be included for modules like toolbars or tooltips to work.
To activate a theme, pass the name of the theme to the theme prop. Pass a falsy value (eg. null) to use the core theme.
<ReactQuill theme="snow" .../>
Then, import the stylesheet for the themes you want to use.
This may vary depending how application is structured, directories or otherwise. For example, if you use a CSS pre-processor like SASS, you may want to import that stylesheet inside your own. These stylesheets can be found in the Quill distribution, but for convenience they are also linked in ReactQuill's dist folder.
Here's an example using style-loader for Webpack, or create-react-app, that will automatically inject the styles on the page:
import 'react-quill/dist/quill.snow.css';
The styles are also available via CDN:
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/quill.snow.css"
/>
The Quill Toolbar Module API provides an easy way to configure the default toolbar icons using an array of format names.
Example Code…
You can also supply your own HTML/JSX toolbar with custom elements that are not part of the Quill theme.
See this example live on Codepen: Custom Toolbar Example
Example Code…
The component has two types of formats:
formats prop. All formats are enabled by default.import ReactQuill, { Quill } from 'react-quill'; // ES6
const ReactQuill = require('react-quill'); // CommonJS
…
If you instantiate ReactQuill without children, it will create a `
);
} }
</details>
`makeUnprivilegedEditor`
: Creates an [unprivileged editor](#unprivileged-editor). Pass this method a reference to the Quill instance from `getEditor`. Normally you do not need to use this method since the editor exposed to event handlers is already unprivileged.
<details>
<summary>Example</summary>
```jsx
const editor = this.reactQuillRef.getEditor();
const unprivilegedEditor = this.reactQuillRef.makeUnprivilegedEditor(editor);
// You may now use the unprivilegedEditor proxy methods
unprivilegedEditor.getText();
…
sh
npm build # or watch
You can also run the automated test suite:
npm test
More tasks are available as package scripts:
Script Descriptionnpm run build
Builds lib and browser bundle
npm run watch
Rebuilds on source code changes
npm run test
Runs unit tests and coverage
npm run clean
Cleans build artifacts
npm run demo
Serves a simple ReactQuill test application
Please check the browser support table for the upstream Quill dependency. The ReactQuill distributable itself is ES5-compatible.
ReactQuill would not be where it is today without the contributions of many people, which we are incredibly grateful for:
The MIT License (MIT)
Copyright (c) 2020, zenoamaro [email protected]
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
No open issues yet, or sync has not completed.