Render Quill's Delta ops in React

Quickstart

Installation

npm install quill-delta-to-react

Usage

import { RenderDelta } from 'quill-delta-to-react';

const ops = [
  { insert: 'Hello\n' },
  { insert: 'This is colorful', attributes: { color: '#ff0000' } },
  { insert: '\n' },
];

const App = () => {
  return (
    <RenderDelta ops={ops} />
  );
};

Principles

This library is designed to provide a lot of flexibility and extensibility. You can customize nearly anything about the rendering.

At the same time, we take performance seriously. You can have many instances of a RenderDelta component on a page, and it will render quickly and efficiently.

Finally, this library keeps dependencies to a minimum, and the dependencies that it has are kept up-to-date.

Configuration

The RenderDelta component accepts a few configuration options with the options prop as shown below:

Option	Type	Default	Description
`paragraphTag`	string	'p'	A custom tag to wrap paragraph elements.
`classPrefix`	string	'ql'	A CSS class name to prefix classes for styles such as `size` and `font`.
`inlineStyles`	boolean or object	false	If true or an object, use inline styles instead of classes. See the Rendering Inline Styles section below for details.
`multiLineBlockquote`	boolean	true	Instead of rendering multiple `blockquote` elements for quotes that are consecutive and have exactly the same attributes, render them into only one.
`multiLineHeader`	boolean	true	Same deal as `multiLineBlockquote` for headers.
`multiLineCodeBlock`	boolean	true	Same deal as `multiLineBlockquote` for code-blocks.
`linkRel`	string	none	Specifies a `rel` attribute's value to put on all links. This can be overridden for any individual link by specifiying a `rel` property with a value in the respective op's attributes.
`linkTarget`	string	none	Specifies a `target` attribute's value to put on all links. This can be overridden for any individual link by specifiying a `target` property with a value in the respective op's attributes.
`allowBackgroundClasses`	boolean	false	If true, classes will be added for the background attribute.
`urlSanitizer`	function (url: string): string	none	A function that is called once per URL in the ops (image, video, link) for you to do sanitization.
`customTag`	function (format: string, op: DeltaInsertOp): string \| undefined	none	Callback allows to provide custom tag for some formats.
`customAttributes`	function (op: DeltaInsertOp): { [key: string]: string } \| undefined	none	Allows to provide custom HTML tag attributes.
`customClasses`	function (op: DeltaInsertOp): string \| string[] \| undefined	none	A function that can provide custom classes for any op (except for custom op types).
`customCssStyles`	function (op: DeltaInsertOp): string \| string[] \| undefined	none	A function that can provide custom CSS styles for any op (except for custom op types).

Rendering Inline Styles

The easiest way to enable this is to pass the option inlineStyles: true.

You can customize styles by passing an object for inlineStyles instead. Below is how the default inline styles are configured:

const DEFAULT_INLINE_STYLES = {
  direction: (value, op) => {
    if (value === 'rtl') {
      if (op.attributes['align']) {
        return {
          direction: 'rtl',
        };
      }
      return {
        direction: 'rtl',
        textAlign: 'inherit',
      };
    }
    return undefined;
  },
  font: (value) => {
    switch (value) {
      case 'serif':
        return { fontFamily: 'Georgia, Times New Roman, serif' };
      case 'monospace':
        return { fontFamily: 'Monaco, Courier New, monospace' };
      default:
        if (typeof value === 'string') {
          return { fontFamily: value };
        }
    }
  },
  size: (value) => {
    switch (value) {
      case 'small':
        return { fontSize: '0.75em' };
      case 'large':
        return { fontSize: '1.5em' };
      case 'huge':
        return { fontSize: '2.5em' };
      default:
        return undefined;
    }
  },
  indent: (value, op) => {
    const indentSize = Number(value) * 3;
    return {
      [op.attributes['direction'] === DirectionType.Rtl
        ? 'paddingRight'
        : 'paddingLeft']: `${indentSize}em`,
    };
  },
};

Keys to this object are the names of attributes from Quill. The values are a function that takes the value of the attribute and the Op object and returns an object of CSS properties (or undefined).

Advanced Custom Rendering

In addition to providing custom HTML element tags, classes, styles, and any other attribute, you can define custom Op types and provide a rendering function for these types with a customRenderer prop.