DEV Community

Sameer Ali
Sameer Ali

Posted on

Introducing react-rte-light: A Lightweight Rich Text Editor for React

#richtexteditor #react #typescript #npm

Are you looking for a lightweight, flexible, and modern rich text editor for your React applications? Look no further! I'm excited to share react-rte-light, a TypeScript-based rich text editor built with Draft.js. It’s designed to work seamlessly with React 16.8 to 19, offering a minimal-dependency alternative to heavier editors like React Quill. Whether you're building a blog platform, a note-taking app, or a CMS, react-rte-light has you covered with its powerful features and simple API.

In this post, I’ll walk you through what makes react-rte-light special, how to get started, and how you can customize it to fit your project’s needs. Let’s dive in!

Why react-rte-light?

There are plenty of rich text editors out there, so why choose react-rte-light? Here’s what sets it apart:

  • Lightweight and Minimal Dependencies: Built with Draft.js and draft-convert, it avoids the bloat of heavier libraries like Quill, keeping your bundle size lean.
  • React Compatibility: Works with React 16.8 to 19, making it versatile for both legacy and modern projects.
  • Tree-Shakable Builds: Supports ESM and CommonJS, optimized for tree-shaking to include only what you need.
  • TypeScript Support: Full type definitions for type-safe development.
  • Customizable and Themed: Tailor the toolbar and styling with built-in light/dark themes or custom CSS variables.
  • Accessible: Includes ARIA roles and keyboard navigation for better accessibility.
  • Controlled and Uncontrolled Modes: Flexible API for both controlled (value + onChange) and uncontrolled (defaultValue) usage.
  • Keyboard Shortcuts: Supports standard shortcuts like Ctrl+B for bold and Ctrl+I for italic.

Whether you need a simple WYSIWYG editor or a highly customized one, react-rte-light is designed to be flexible and developer-friendly.

Features

  • Core Editing: Bold, italic, underline, strike-through, headings (H1, H2), links, blockquotes, ordered/unordered lists, and code blocks.
  • Customizable Toolbar: Pick and choose which controls to include via props.
  • Theming: Built-in light and dark themes, plus custom theming with CSS variables.
  • Accessibility: ARIA-compliant with keyboard navigation support.
  • Minimal Footprint: Only depends on Draft.js and draft-convert.

Getting Started

Installation

Install the package via npm:

npm install react-rte-light --legacy-peer-deps
Enter fullscreen mode Exit fullscreen mode

Note: Use --legacy-peer-deps to handle peer dependency conflicts, especially with React 19 and Draft.js.

Next, import the styles in your app:

import 'react-rte-light/dist/index.css';
Enter fullscreen mode Exit fullscreen mode

Basic Usage

Here’s a simple example to get you started:

import { RichTextEditor } from 'react-rte-light';

function App() {
  return <RichTextEditor placeholder="Start typing..." />;
}
Enter fullscreen mode Exit fullscreen mode

This renders a fully functional editor with all toolbar options enabled.

Controlled Mode (React 19 or 17)

The editor works the same in React 19 and React 17, thanks to its backward-compatible design:

import { useState } from 'react';
import { RichTextEditor } from 'react-rte-light';

function ControlledEditor() {
  const [value, setValue] = useState('<p>Initial content</p>');

  return (
    <RichTextEditor
      value={value}
      onChange={setValue}
      placeholder="Type your content..."
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

Uncontrolled Mode

For simpler use cases, you can use the uncontrolled mode with defaultValue:

import { RichTextEditor } from 'react-rte-light';

function UncontrolledEditor() {
  return (
    <RichTextEditor
      defaultValue="<p>Default content</p>"
      onChange={(value) => console.log('Content:', value)}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

Customization

react-rte-light is built for flexibility. Here are some ways to tailor it to your needs:

Custom Toolbar

Limit the toolbar to specific controls:

import { RichTextEditor } from 'react-rte-light';

function CustomToolbar() {
  const toolbarOptions = ['bold', 'italic', 'link', 'unordered-list'];
  return <RichTextEditor toolbarOptions={toolbarOptions} />;
}
Enter fullscreen mode Exit fullscreen mode

Theming

Switch to the built-in dark theme or define a custom theme with CSS variables:

import { RichTextEditor } from 'react-rte-light';

function ThemedEditor() {
  // Built-in dark theme
  return <RichTextEditor theme="dark" />;
}

function CustomThemedEditor() {
  // Custom theme
  const customTheme = {
    '--editor-bg': '#f0f0f0',
    '--editor-text': '#333',
    '--link-color': 'green',
  };
  return <RichTextEditor theme={customTheme} />;
}
Enter fullscreen mode Exit fullscreen mode

Read-Only Mode

Display content without allowing edits:

import { RichTextEditor } from 'react-rte-light';

function ReadOnlyEditor() {
  return (
    <RichTextEditor
      readOnly={true}
      value="<p>This is read-only content.</p>"
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

API Reference

The RichTextEditor component accepts the following props:

interface RichTextEditorProps {
  value?: string; // HTML string for controlled mode
  defaultValue?: string; // HTML string for uncontrolled mode
  onChange?: (value: string) => void; // Called with updated HTML content
  toolbarOptions?: ToolbarOption[]; // Array of toolbar buttons
  readOnly?: boolean; // Disables editing if true
  theme?: 'light' | 'dark' | CustomTheme; // Theme selection
  placeholder?: string; // Placeholder text
  className?: string; // Additional CSS class for the editor
}

type ToolbarOption =
  | 'bold'
  | 'italic'
  | 'underline'
  | 'strikethrough'
  | 'header-one'
  | 'header-two'
  | 'blockquote'
  | 'ordered-list'
  | 'unordered-list'
  | 'code-block'
  | 'link';

interface CustomTheme extends Record<string, string> {};
Enter fullscreen mode Exit fullscreen mode

Supported Toolbar Options

  • bold (Ctrl+B)
  • italic (Ctrl+I)
  • underline (Ctrl+U)
  • strikethrough
  • header-one (H1)
  • header-two (H2)
  • blockquote
  • ordered-list
  • unordered-list
  • code-block
  • link (prompts for URL)

Why Draft.js?

I chose Draft.js as the underlying editor engine because it’s lightweight, well-maintained, and provides a robust foundation for rich text editing. Unlike Quill, it avoids unnecessary DOM manipulations and integrates naturally with React’s component model. The draft-convert library simplifies HTML conversion, making it easy to work with standard web formats.

Try It Out!

You can find the package on npm and GitHub:

To test it locally, clone the repo and run:

git clone https://github.com/sameer52718/react-rte-light.git
cd react-rte-light
npm install --legacy-peer-deps
npm run build
Enter fullscreen mode Exit fullscreen mode

Contributing

I’d love for you to contribute to react-rte-light! Here’s how to get started:

  1. Fork the repository on GitHub.
  2. Create a feature branch: git checkout -b feature/your-feature.
  3. Commit your changes: git commit -m "Add your feature".
  4. Push to the branch: git push origin feature/your-feature.
  5. Open a pull request.

Please include tests for new features and follow the existing TypeScript and ESLint standards.

Feedback

Have ideas for new features or found a bug? Open an issue on GitHub or reach out on Twitter/X. Let’s make react-rte-light even better together!

Conclusion

react-rte-light is a modern, lightweight solution for rich text editing in React. Its simplicity, flexibility, and compatibility make it a great choice for developers building content-heavy applications. Give it a try in your next project and let me know what you think!

Happy coding! 🚀

Tags: #React #RichTextEditor #TypeScript #DraftJS #WebDevelopment #Frontend #NPM #UI #JavaScript #OpenSource

Top comments (0)