Integrating React QuillJs with React Hook Form

Quilljs is a free, open-source library that lets developers easily add rich text editing capabilities to their web applications. It provides a familiar WYSIWYG (What You See Is What You Get) editing experience, similar to popular word processors, allowing users to format text, add images, and create interactive content. It's also known for being customizable, so developers can tailor it to their specific needs.

While React Quill was once a popular option for adding rich text editing to React applications, there are a couple reasons why it might not be the most relevant choice these days:

• Out of Date: React Quill hasn't had major updates in over two years. This raises concerns about compatibility with newer React versions and security risks.
• Quill v2 Issues: There's a new version of Quill (v2), but React Quill doesn't seem to work with it smoothly, potentially causing problems.
• Outdated Techniques: React Quill might use older methods for handling the web page structure (DOM manipulation) that aren't ideal for modern React development.

There's a new React library called React Quilljs that's actively maintained and integrates well with React projects.

I'll show you how to use React Quilljs with React Hook Form in a TypeScript project. While it might not be the ultimate solution, it works!

Install dependencies

npm install react-quilljs quill
npm install -D @types/quill
npm install react-hook-form

For other configuration options, check out the react-quilljs documentation.

Usage

First, create a file named App.tsx in the root directory. This file will be used to render the editor. Be caution when using this file like this, because it will not work without the Layout.tsx component (see the project on GitHub)

Then, create a file named Editor.tsx in the components directory. This file will be used to render the editor.

Conclusion

You can view results on CodeSandbox

The project is hosted on GitHub

Thank you

Life's too short for boring endings.