react-quill

You can extend the editor by creating custom formats using Parchment and registering them with the Quill object. Once registered, include the custom format name in the formats prop of the ReactQuill component.

import ReactQuill, { Quill } from 'react-quill';

// Define and register a custom blot
let Inline = Quill.import('blots/inline');
class BoldBlot extends Inline {}
BoldBlot.blotName = 'bold';
BoldBlot.tagName = 'strong';
Quill.register('formats/bold', BoldBlot);

const formats = ['bold']; // Include custom format name here

// Use in component
<ReactQuill
  value={this.state.text}
  onChange={this.handleChange}
  formats={formats}
/>

Upgrading to v2 involves updating your dependency, but be aware of the following removals:

• Deprecated Props: Support for toolbar, styles, and pollInterval Quill options has been removed. These will no longer trigger warnings if used.
• ReactQuill Mixin: The Mixin is deprecated and has no upgrade path. If your implementation relies on it, you must find an alternative or open an issue for potential feature support.
• Toolbar Component: The internal Toolbar component is removed. Use the Toolbar Module or the HTML Toolbar features instead.

By default, ReactQuill creates a <div> for the editing area. You can specify your own element by passing it as a child to the ReactQuill component. Note that <textarea> elements are not supported.

Note: Custom editing areas may lose focus when using React 16 as a peer dependency.

<ReactQuill>
  <div className="my-editing-area"/>
</ReactQuill>

Instead of using HTML strings, you can pass a Quill Delta to the value or defaultValue props. Deltas are often more advantageous than HTML strings, though comparing them for changes is more computationally expensive.

Important:

• Do not use the delta object received from the onChange event as the value. This object only contains the recent modifications, not the full document, and using it as value will likely trigger an infinite loop.
• To get the full document Delta during an onChange event, use editor.getContents().

In controlled mode, you manage the editor's content using the value and onChange props.

Caveat: Because Quill manages its own internal state and does not allow preventing edits, ReactQuill operates as a hybrid. It cannot prevent a change from happening in the DOM, but it will override the content if the value prop differs from the current state.

If you need to manipulate the DOM imperatively or use the Quill API frequently, consider using uncontrolled mode by providing defaultValue instead of value. In uncontrolled mode, ReactQuill will initialize with the default value but will not attempt to reset the content after initialization.

For environments without a module bundler, you can include React, ReactDOM, and ReactQuill via unpkg. You must also include the theme CSS and a transpiler like Babel if using JSX.

<link
  rel="stylesheet"
  href="https://unpkg.com/react-quill@1.3.3/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/react-quill@1.3.3/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>

ReactQuill supports several themes. The core theme is required for modules like toolbars to function. The snow theme is the standard appearance, and the bubble theme provides an inline editor experience similar to Medium.

To activate a theme, pass the theme name to the theme prop. To use the core theme, pass a falsy value like null.

You must also import the corresponding CSS file for the theme to render correctly.

To use ReactQuill in a project using webpack or create-react-app, install the package using npm. Ensure you have react and react-dom installed, and a way to load styles (such as style-loader).

npm install react-quill --save

The ReactQuill component is the primary interface for integrating the Quill editor into a React application. It supports both controlled and uncontrolled modes.

Controlled Mode: Pass a value prop to the component. You must update this value in your state via the onChange callback to keep the editor in sync.

Uncontrolled Mode: Use defaultValue to set the initial content. The component will manage its own internal state thereafter.

To implement a basic ReactQuill component, import ReactQuill and the desired theme CSS (e.g., quill.snow.css). Use the theme, value, and onChange props to manage the editor state.

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