Getting Started with Rich Text Editors in React

Rich text editors are everywhere. From Google Docs, Twitter, comment sections on sites like Reddit and YouTube, to content websites like the one hosting this very blog, everyone has used one at some point.

They give users far more options when formatting text, and the ability to embed links, code blocks, images, and much more, depending on what your users need, and the level of complexity you want to give your text editor. Even if you’re just tired of plain old <textarea> and <input> elements, considering opting for a rich text editor instead.

Luckily, there are several free options that are relatively easy to get started with. To list a few:

• Draft.js
• Quill
• Slate
• tiptap

However, there are plenty of other options out there, so definitely don’t feel like you should be confined to this list for any reason!

In this example, we’ll be using Quill. It’s pretty easy to work with, and comes with an out of the box product with plenty of functionality — no customization needed.

First, let’s create a React app:

$ npx create-react-app quill-editor
$ cd quill-editor
$ npm start

Once your app is running, let’s install Quill for React:

$ npm install react-quill

Head to your App.js file and feel free to clear everything out of there. Then we’ll import the ReactQuill component, as well as a style sheet for the default theme we’ll be using, called snow. This will give us a classic toolbar above our editor.

If you’d prefer a Medium style editor, use the bubble theme (simply replace snow with bubble).

// App.js file
import { ReactQuill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';

Let’s then wrap our ReactQuill component in a div and give it a theme prop of snow.

If you open your app, you should see already see a nice looking text editor! Our App.js file should now look like this:

import './App.css';
import { ReactQuill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
function App() {
  return (
    <div>
      <ReactQuill theme="snow"/>
    </div>
  );
}
export default App;

I also gave our div a className of editor and applied the following css to clean it up a bit, but feel free to style your editor however you like.

.editor {
  text-align: center;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
}

Now, our browser should look something like this, and I’ve included some sample text to demonstrate some of the different edits we are able to make.

Toolbar Customization

We can also customize which toolbar features we’d like to use pretty easily by configuring the toolbar module

const modules = {
  toolbar: [
  // customization options here
  ]
}
function App() {
  return (
    <div className='editor'>
      <ReactQuill modules={modules} theme="snow"/>
    </div>
  );
}
export default App;

Different toolbar features are grouped in arrays, and separating them will give some space between each of our buttons. Try updating your modules variable to reflect these changes and see what happens in your browser:

const modules = {
  toolbar: [
    ["bold", "underline", "italic"],
    ["code-block", "blockquote"]
  ]
}

We can also make custom buttons and drop downs by providing the type of element as an object key. Try adding this to your code as well:

const modules = {
  toolbar: [
    ["bold", "underline", "italic"],
    ["code-block", "blockquote"],
    [{ header: [1, 2, 3, 4, 5] }], // custom dropdown
    [{ list: "ordered" }], // custom button with type specified
    [{ list: "bullet" }] // custom button with type specified
  ]
}

If you want to learn more about customization for the toolbar and beyond, be sure to check out their documentation.

Saving Changes in State

In order to make use of any of our new content, it would be prudent to save it in state. This is also quite easy in Quill. At the top of our file, let’s import useState:

import { useState } from 'react'

Next, we’ll declare a state variable to save our content:

const [ value, setValue ] = useState("")

Then, we’ll add an onChange event handler to our ReactQuill component, and assign it the setValue function we just made, so our value is updated every time we type something new. Our code now looks like this:

import './App.css';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { useState } from 'react'

function App() {
  const [ value, setValue ] = useState("");
  const modules = {
    toolbar: [
      ["bold", "underline", "italic"],
      ["code-block", "blockquote"],
      [{ header: [1, 2, 3, 4, 5] }],
      [{ list: "ordered" }],
      [{ list: "bullet" }]
    ]
  }
 return (
    <div className='editor'>
      <ReactQuill modules={modules} 
                  theme="snow" 
                  onChange={setValue}/>
    </div>
  );
}
export default App;

Try throwing in a console.log(value) to see your html changing real time!

Conclusion

This should be enough to get you started if you’re trying to implement a rich text editor in your next React app. Hope you enjoyed reading — feel free to share or reach out with any questions.

Build composable frontend and backend

Don’t build web monoliths. Use Bit to create and compose decoupled software components — in your favorite frameworks like React or Node. Build scalable and modular applications with a powerful and enjoyable dev experience.

Bring your team to Bit Cloud to host and collaborate on components together, and greatly speed up, scale, and standardize development as a team. Start with composable frontends like a Design System or Micro Frontends, or explore the composable backend. Give it a try →

Learn More

How We Build Micro Frontends

How we Build a Component Design System

The Composable Enterprise: A Guide

7 Tools for Faster Frontend Development in 2022