react-quilljs

React Hook Wrapper for Quill.

SSR Safe • Typescript Support • Unopinionated • No Dependencies • Tiny Package Size

Install

// Install packages

$ pnpm add react-quilljs quill
or
$ yarn add react-quilljs quill
or
$ npm install react-quilljs quill


// If you are using Typescript

$ pnpm add -D @types/quill

---

Usage

Code Sandbox Playground Example

Basic

1import React from 'react';
2
3import { useQuill } from 'react-quilljs';
4// or const { useQuill } = require('react-quilljs');
5
6import 'quill/dist/quill.snow.css'; // Add css for snow theme
7// or import 'quill/dist/quill.bubble.css'; // Add css for bubble theme
8
9export default () => {
10  const { quill, quillRef } = useQuill();
11
12  console.log(quill);    // undefined > Quill Object
13  console.log(quillRef); // { current: undefined } > { current: Quill Editor Reference }
14
15  return (
16    <div style={{ width: 500, height: 300 }}>
17      <div ref={quillRef} />
18    </div>
19  );
20};

---

With Initial Value

1export default () => {
2  const { quill, quillRef } = useQuill();
3
4  React.useEffect(() => {
5    if (quill) {
6      quill.clipboard.dangerouslyPasteHTML('<h1>React Hook for Quill!</h1>');
7    }
8  }, [quill]);
9
10  return (
11    <div style={{ width: 500, height: 300 }}>
12      <div ref={quillRef} />
13    </div>
14  );
15};

---

With onChange Handler

• https://quilljs.com/docs/api/#text-change

1export default () => {
2  const { quill, quillRef } = useQuill();
3
4  React.useEffect(() => {
5    if (quill) {
6      quill.on('text-change', (delta, oldDelta, source) => {
7        console.log('Text change!');
8        console.log(quill.getText()); // Get text only
9        console.log(quill.getContents()); // Get delta contents
10        console.log(quill.root.innerHTML); // Get innerHTML using quill
11        console.log(quillRef.current.firstChild.innerHTML); // Get innerHTML using quillRef
12      });
13    }
14  }, [quill]);
15
16  return (
17    <div style={{ width: 500, height: 300 }}>
18      <div ref={quillRef} />
19    </div>
20  );
21};

---

With Adding Plugins

counter

1export default () => {
2  const counterRef = React.useRef();
3  const { quill, quillRef, Quill } = useQuill({ modules: { counter: true } });
4
5  if (Quill && !quill) {
6    // For execute this line only once.
7    Quill.register('modules/counter', function(quill, options) {
8      quill.on('text-change', function() {
9        const text = quill.getText();
10        // There are a couple issues with counting words
11        // this way but we'll fix these later
12        counterRef.current.innerText = text.split(/\s+/).length;
13      });
14    });
15  }
16
17  return (
18    <div style={{ width: 500, height: 300 }}>
19      <div ref={quillRef} />
20      <div ref={counterRef} />
21    </div>
22  );
23};

magic-url

1export default () => {
2  const { quill, quillRef, Quill } = useQuill({ modules: { magicUrl: true }});
3
4  if (Quill && !quill) { // For execute this line only once.
5    const MagicUrl = require('quill-magic-url').default; // Install with 'yarn add quill-magic-url'
6    Quill.register('modules/magicUrl', MagicUrl);
7  }
8
9  return (
10    <div style={{ width: 500, height: 300 }}>
11      <div ref={quillRef} />
12    </div>
13  );
14};

---

With Custom Options

custom all options

1import 'quill/dist/quill.snow.css'; // Add css for snow theme
2// import 'quill/dist/quill.bubble.css'; // Add css for bubble theme
3
4export default () => {
5
6  const theme = 'snow';
7  // const theme = 'bubble';
8
9  const modules = {
10    toolbar: [
11      ['bold', 'italic', 'underline', 'strike'],
12    ],
13  };
14
15  const placeholder = 'Compose an epic...';
16
17  const formats = ['bold', 'italic', 'underline', 'strike'];
18
19  const { quillRef } = useQuill({ theme, modules, formats, placeholder });
20
21  return (
22    <div style={{ width: 500, height: 300, border: '1px solid lightgray' }}>
23      <div ref={quillRef} />
24    </div>
25  );
26};

custom toolbar with elements

1export default () => {
2  const { quillRef } = useQuill({
3    modules: {
4      toolbar: '#toolbar'
5    },
6    formats: ["size", "bold", "script"], // Important
7  });
8
9  return (
10    <div style={{ width: 500, height: 300 }}>
11      <div ref={quillRef} />
12
13      <div id="toolbar">
14        <select className="ql-size">
15          <option value="small" />
16          <option selected />
17          <option value="large" />
18          <option value="huge" />
19        </select>
20        <button className="ql-bold" />
21        <button className="ql-script" value="sub" />
22        <button className="ql-script" value="super" />
23      </div>
24      <div id="editor" />
25    </div>
26  );
27};

---

With Custom Attached Image Upload

1import fetch from 'isomorphic-unfetch';
2
3export default () => {
4  const { quill, quillRef } = useQuill();
5
6  // Insert Image(selected by user) to quill
7  const insertToEditor = (url) => {
8    const range = quill.getSelection();
9    quill.insertEmbed(range.index, 'image', url);
10  };
11
12  // Upload Image to Image Server such as AWS S3, Cloudinary, Cloud Storage, etc..
13  const saveToServer = async (file) => {
14    const body = new FormData();
15    body.append('file', file);
16
17    const res = await fetch('Your Image Server URL', { method: 'POST', body });
18    insertToEditor(res.uploadedImageUrl);
19  };
20
21  // Open Dialog to select Image File
22  const selectLocalImage = () => {
23    const input = document.createElement('input');
24    input.setAttribute('type', 'file');
25    input.setAttribute('accept', 'image/*');
26    input.click();
27
28    input.onchange = () => {
29      const file = input.files[0];
30      saveToServer(file);
31    };
32  };
33
34  React.useEffect(() => {
35    if (quill) {
36      // Add custom handler for Image Upload
37      quill.getModule('toolbar').addHandler('image', selectLocalImage);
38    }
39  }, [quill]);
40
41  return (
42    <div style={{ width: 500, height: 300, border: '1px solid lightgray' }}>
43      <div ref={quillRef} />
44    </div>
45  );
46};

Parameters

useQuill(options)

options

Options for Quill Configuration.
Type: Object

• theme
  Quill Theme.
  Type: String
  Default: 'snow'

• modules
  Quill Modules.
  Type: Object
  Default:

  {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      [{ align: [] }],
  
      [{ list: 'ordered'}, { list: 'bullet' }],
      [{ indent: '-1'}, { indent: '+1' }],
  
      [{ size: ['small', false, 'large', 'huge'] }],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      ['link', 'image', 'video'],
      [{ color: [] }, { background: [] }],
    ],
    clipboard: {
      matchVisual: false,
    },
  }
  

• formats
  Quill Formats.
  Type: Array
  Default:

  [
    'bold', 'italic', 'underline', 'strike',
    'align', 'list', 'indent',
    'size', 'header',
    'link', 'image', 'video',
    'color', 'background',
  ]
  

Return

quill

Quill object.
You can use quill apis(https://quilljs.com/docs/api/) with this object.
Type: Object

quillRef

Quill Editor reference.
Type: RefObject

Quill

Quill class. You can use register, find, import, debug.
Please refer example above.
Type: Class

---

Recommend Libraries

• React Checklist - Make Checkbox List Easy and Simple with React Hooks.
• React Store - React Hook Store with useContext and useReducer for State Management.
• Decode URI Component Charset - Decode URI Component with Charset such as 'euc-kr' without tears.

Maintainer

• Jehun Seem

License

MIT