How to Create a Text Editor in React

React is a powerful library for frontend development. I will guide you to create a text editor in React. We are going to use ReactQuill and quill.js to create the Text Editor.

QuillJS:- Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.

ReactQuill:- It is a NPM library built on top of QuillJS. We can use all the features written in QuillJS in the React App using ReactQuill library.

Below is the text editor component in React

import React from 'react';
import ReactQuill from 'react-quill';

const TextEditor = ()=>{
  const [value, setValue] = React.useState('');

const customToolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], 
    ['blockquote', 'code-block'],
  
    [{ 'header': 1 }, { 'header': 2 }],             
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script': 'sub'}, { 'script': 'super' }],   
    [{ 'indent': '-1'}, { 'indent': '+1' }],          
    [{ 'direction': 'rtl' }],                         
  
    [{ 'size': ['small', false, 'large', 'huge'] }],  
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  
    [{ 'color': [] }, { 'background': [] }],      
    [{ 'font': [] }],
    [{ 'align': [] }],
  
    ['clean']                                         
  ];
  
  return <ReactQuill 
          theme="snow" 
          className="text-editor" 
          value={value} 
          onChange={setValue} 
          modules={{toolbar: customToolbarOptions}} />
}

I have added a custom toolbar option, we can add more properties like custom toolbar by following QuillJS document.

Output of the TextEditor component

For your reference, below is the Codepen URL for the text editor.

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture | Cubed
• More content at PlainEnglish.io