React-Quill

A Quill component for React.

See a live demo or Codepen.

1. Quick start
2. Import the component
3. Import the stylesheet
4. Use the component
5. Using Deltas
6. Controlled vs Uncontrolled Mode
7. Options
8. Theme
9. Custom Toolbar
10. Custom Formats
11. Custom Editing Area
12. Mixin
13. Upgrading to React-Quill v1.0.0
14. API reference
15. Exports
16. Props
17. Methods
18. Browser support
19. Building and testing
20. Bundling with Webpack
21. Changelog
22. Contributors
23. License

---

💯 React Quill now supports Quill v1.0.0! Thanks to @clemmy and @alexkrolick for landing this much-awaited change. There are many breaking changes, so be sure to read the migration guide.

---

🎧 Latest published package version: v1.0.0

npm install react-quill@v1.0.0

Special thank you to everyone who contributed during the 1.0.0 release cycle!

---

🏵 Welcoming @alexkrolick to the team! His contributions have been incredible so far, and his passion and dedication will bring some much-deserved love to this project.

---

Quick Start

Import the component

const ReactQuill = require('react-quill'); // CommonJS
import ReactQuill from 'react-quill'; // ES6

Import the stylesheet

Two common examples are shown below. How stylesheets are included in your app depends on build system (Webpack, SCSS, LESS, etc). See the documentation on Themes for more information.

Fetching styles from the CDN

<link rel="stylesheet" href="https://github.com/zenoamaro/react-quill/raw/v1.1.0/cdn.quilljs.com/1.2.6/quill.snow.css">

Using css-loader with Webpack or create-react-app

const theme = require('react-quill/dist/quill.snow.css'); // CommonJS
import theme from 'react-quill/dist/quill.snow.css'; // ES6

Use the component

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { text: '' } // You can also pass a Quill Delta here
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(value) {
    this.setState({ text: value })
  }

  render() {
    return (
      <ReactQuill value={this.state.text}
                  onChange={this.handleChange} />
    )
  }
}

Using Deltas

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.

Controlled vs Uncontrolled Mode

Pass defaultValue instead of value if you need to use DOM or Quill APIs to imperatively manipulate the editor state. In this "uncontrolled" mode ReactQuill uses the prop as the initial value but allows the element to deviate after that. The onChange callback still works normally.

• Read more about uncontrolled components in the React docs.
• Read more about the available props.

Options

Theme

The Quill editor supports themes. It includes a full-fledged theme, called snow, that is Quill's standard appearance, a bubble theme that is similar to the inline editor on Medium, and a core theme containing only the bare essentials to allow modules like toolbars or tooltips to work.

These stylesheets can be found in the Quill distribution, but for convenience they are also linked in React Quill's dist folder. In a common case you would activate a theme by setting the theme prop. Pass a falsy value (null) to disable the theme.

<ReactQuill theme="snow" /> // or "bubble", null to use minimal core theme

And then link the appropriate stylesheet (only link the CSS for the themes you want to use):

<link rel="stylesheet" href="https://github.com/zenoamaro/react-quill/raw/v1.1.0/node_modules/react-quill/dist/quill.snow.css">
<link rel="stylesheet" href="https://github.com/zenoamaro/react-quill/raw/v1.1.0/node_modules/react-quill/dist/quill.bubble.css">
<link rel="stylesheet" href="https://github.com/zenoamaro/react-quill/raw/v1.1.0/node_modules/react-quill/dist/quill.core.css">

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.

Custom Toolbar

Default Toolbar Elements

The Quill Toolbar Module API provides an easy way to configure the default toolbar icons using an array of format names.

Example Code

var MyComponent = React.createClass({

  modules: {
    toolbar: [
      [{ 'header': [1, 2, false] }],
      ['bold', 'italic', 'underline','strike', 'blockquote'],
      [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
      ['link', 'image'],
      ['clean']
    ],
  },

  formats: [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image'
  ],

  render: function() {
    return (



        <ReactQuill theme="snow"
                    modules={this.modules}
                    formats={this.formats}>
        </ReactQuill>



    );
  },

});

HTML Toolbar

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

/*
 * Custom "star" icon for the toolbar using an Octicon
 * https://octicons.github.io
 */
const CustomButton = () => <span className="octicon octicon-star" />

/*
 * Event handler to be attached using Quill toolbar module
 * http://quilljs.com/docs/modules/toolbar/
 */
function insertStar () {
  const cursorPosition = this.quill.getSelection().index
  this.quill.insertText(cursorPosition, "★")
  this.quill.setSelection(cursorPosition + 1)
}

/*
 * Custom toolbar component including insertStar button and dropdowns
 */
const CustomToolbar = () => (



    <select className="ql-header">
      <option value="1"></option>
      <option value="2"></option>
      <option selected></option>
    </select>
    <button className="ql-bold"></button>
    <button className="ql-italic"></button>
    <select className="ql-color">
      <option value="red"></option>
      <option value="green"></option>
      <option value="blue"></option>
      <option value="orange"></option>
      <option value="violet"></option>
      <option value="#d0d1d2"></option>
      <option selected></option>
    </select>
    <button className="ql-insertStar">
      <CustomButton />
    </button>



)

/*
 * Editor component with custom toolbar and content containers
 */
class Editor extends React.Component {
  constructor (props) {
    super(props)
    this.state = { editorHtml: '' }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange (html) {
    this.setState({ editorHtml: html });
  }

  render() {
    return (



        <CustomToolbar />
        <ReactQuill
          onChange={this.handleChange}
          placeholder={this.props.placeholder}
          modules={Editor.modules}
        />



    )
  }
}

/*
 * Quill modules to attach to editor
 * See http://quilljs.com/docs/modules/ for complete options
 */
Editor.modules = {
  toolbar: {
    container: "#toolbar",
    handlers: {
      "insertStar": insertStar,
    }
  }
}

/*
 * Quill editor formats
 * See http://quilljs.com/docs/formats/
 */
Editor.formats = [
  'header', 'font', 'size',
  'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent',
  'link', 'image', 'color',
]

/*
 * PropType validation
 */
Editor.propTypes = {
  placeholder: React.PropTypes.string,
}

/*
 * Render component on page
 */
ReactDOM.render(
  <Editor placeholder={'Write something or insert a star ★'}/>,
  document.querySelector('.app')
)

Custom Formats

The component has two types of formats:

1. The default Quill formats that are enabled/disabled using the formats prop. All formats are enabled by default.
2. Custom formats created using Parchment and registered with your component's Quill instance

Example Code

const ReactQuill = require('react-quill'); // CommonJS
import ReactQuill, { Quill } from 'react-quill'; // ES6

/*
 * Example Parchment format from
 * https://quilljs.com/guides/cloning-medium-with-parchment/
 */
let Inline = Quill.import('blots/inline');
class BoldBlot extends Inline { }
BoldBlot.blotName = 'bold';
BoldBlot.tagName = 'strong';
Quill.register(BoldBlot);

/*
 * Editor component with default and custom formats
 */
class MyComponent extends React.Component {
  constructor(props) {
    this.formats = ['italic, 'underline'] // default formats
    this.state = { text: '' }
  }

  handleChange(value) {
    this.setState({text: value})
  }

  render() {
    return (
      <ReactQuill
        value={this.state.text}
        onChange={this.handleChange}
        formats={this.formats} // the custom format is already registered
      />
    )
  }
}

Custom editing area

If you instantiate ReactQuill without children, it will create a `

for you, to be used as the editing area for Quill. If you prefer, you can specify your own element for ReactQuill to use. Note that`s are not supported by Quill at this time.</p> <pre><code class="language-jsx">class MyComponent extends React.Component { render() { return ( <ReactQuill> </ReactQuill> ); } }); </code></pre> <h3>Mixin</h3> <p>The module exports a mixin which can be used to create custom editor components. (Note that mixins will be deprecated in a future version of React).</p> <p>Example Code</p> <p>The ReactQuill default component is built using the mixin. See <a href="https://github.com/zenoamaro/react-quill/raw/v1.1.0/src/component.js">component.js</a> for source.</p> <pre><code class="language-jsx">import {Mixin} from 'react-quill' var MyComponent = React.createClass({ mixins: [ ReactQuill.Mixin ], componentDidMount: function() { var editor = this.createEditor( this.getEditingArea(), this.getEditorConfig() ); this.setState({ editor:editor }); }, componentWillReceiveProps: function(nextProps) { if ('value' in nextProps && nextProps.value !== this.props.value) { this.setEditorContents(this.state.editor, nextProps.value); } }, }); </code></pre> <h2>Upgrading to React-Quill v1.0.0</h2> <p>In most cases, ReactQuill will raise useful warnings to help you perform any necessary migration steps.</p> <p>Please note that many <a href="http://quilljs.com/guides/upgrading-to-1-0/">migration steps to Quill v1.0</a> may also apply.</p> <p>Expand Upgrade Guide</p> <h3>The toolbar module</h3> <p>With v1.0.0, Quill adopted a new <a href="https://quilljs.com/docs/modules/toolbar/">toolbar configuration format</a>, to which React Quill will delegates all toolbar functionality, and which is now the preferred way to customize the toolbar.</p> <p>Previously, toolbar properties could be set by passing a <code>toolbar</code> prop to React Quill. Pass the same options as <code>modules.toolbar</code> instead.</p> <p>Read More</p> <pre><code class="language-diff">+ modules: { toolbar: [ ... ], + }, <ReactQuill - toolbar={this.toolbar} + modules={this.modules} /> </code></pre> <p>If you used to provide your own HTML toolbar component, you can still do the same:</p> <pre><code class="language-diff">+ modules: { + toolbar: '#my-toolbar-component', + }, <ReactQuill - toolbar="#my-toolbar-component" + modules={this.modules} /> </code></pre> <p>Note that it is not possible to pass a toolbar component as a child to ReactQuill anymore.</p> <p>Previously, React Quill would create a custom HTML toolbar for you if you passed a configuration object as the <code>toolbar</code> prop. This will not happen anymore. You can still create a <code>ReactQuill.Toolbar</code> explicitly:</p> <p>```diff + modules: { + toolbar: '#my-quill-toolbar', + },</p> <ul> <li><ReactQuill.Toolbar</li> <li>id='my-quill-toolbar</li> </ul>