Introducing react-hook-quill

Kozo Oeda — Mon, 03 Mar 2025 13:05:39 +0000

I developed react-hook-quill, a lightweight wrapper for Quill, a rich text editor.

import { memo, useRef } from 'react';
import 'quill/dist/quill.snow.css';
import { Delta } from 'quill';
import { useQuill, usePersistentDelta } from 'react-hook-quill';

const Editor = memo(() => {
  const ref = useRef<HTMLDivElement>(null);
  const { persistentDeltaSetting } = usePersistentDelta(
    {
      containerRef: ref,
      options: {
        theme: 'snow'
      }
    },
    new Delta().insert('Hello Quill')
  );

  useQuill({ setting: persistentDeltaSetting });

  return (
    <div ref={ref} />
  );
});

In this post, I will briefly explain the design of this wrapper.

The 1st issue

The first issue is that Quill is not developed specifically for React. It is a vanilla JS(TS) editor. The goal of this wrapper is not to interfere with the design of either React or Quill.
My approach was to use useEffect. In many cases, it is better to avoid using useEffect, but in this case, it was a good fit for the design of this wrapper.

Using useEffect in the custom hook(useQuill) hides the mechanics inside. People may not be aware that Quill is initialized after the DOM has been mounted.
In most cases, this doesn't need to be something people are aware of, but in some cases, it is necessary, such as with SSR.
Currently, the solution is to document it as a note.

The 2nd issue

The second issue is how to best control user edits.
In some cases, it may be better to store user edits in the state of React, but in other cases, it triggers a re-render with every change, which can be an overhead for the application.

To solve this issue, I prepared two custom hooks for setting up useQuill.
One is usePersistentDelta, and the second is useSyncDelta.
This acts like syntactic sugar for general settings. usePersistentDelta does not track user edits on the React side, so user edits don't trigger re-renders.
On the other hand, useSyncDelta syncs user edits on the React side.
Of course, you can also manually use useQuill.

Even a small wrapper has many aspects to consider, but this is also the fun part of development.

Link

Quill: https://quilljs.com/
react-hook-quill: https://github.com/kozmof/react-hook-quill

Iterate multiple lists all at once

Kozo Oeda — Fri, 10 Jul 2020 12:04:55 +0000

Use zip and for-loop
Example:

a = ["a", "b", "c"]
b = [1, 2, 3]

for e1, e2 in zip(a, b):
    print(e1, e2)

Output:

a 1
b 2
c 3

Implementing auto-completion by Regex

Kozo Oeda — Mon, 03 Dec 2018 11:18:23 +0000

By using an input as a pattern (which is the reverse of the typical use case), you can easily implement a simple word auto-completion feature!

import re

example_words = ["Python", "Linux", "HHKB", "Pizza", "Ninja"]

pattern = input()

for word in example_words:
    if re.match(pattern, word, re.IGNORECASE):
        print(word)

Input example

li

Output

Linux

Version: Python 3

How to get access in a list of tuples with ordered numbers in a for-loop

Kozo Oeda — Sun, 02 Dec 2018 15:14:07 +0000

I encountered a situation where I needed to use elements from a list of tuples with ordered numbers, and it worked.

example_list = [("a", "b"), ("c", "d"), ("e", "f"), ("g", "h"), ("i", "j")]

for num, (el1, el2) in enumerate(example_list):
    print(num, el1, el2)

Result:


 0 a b
 1 c d
 2 e f
 3 g h
 4 i j