DEV Community: Sameer Ali

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

Sameer Ali — Wed, 13 Aug 2025 11:23:21 +0000

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

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';

Basic Usage

Here’s a simple example to get you started:

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

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

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..."
    />
  );
}

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)}
    />
  );
}

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} />;
}

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} />;
}

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>"
    />
  );
}

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> {};

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:

📦 npm
🐙 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

Contributing

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

Fork the repository on GitHub.
Create a feature branch: git checkout -b feature/your-feature.
Commit your changes: git commit -m "Add your feature".
Push to the branch: git push origin feature/your-feature.
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

Effortless Firestore Queries in React with React Query

Sameer Ali — Fri, 11 Jul 2025 08:00:01 +0000

Effortless Firestore Queries in React with React Query

If you're working with Firebase Firestore and React, you probably love the simplicity of Firebase — but not necessarily the mess of onSnapshot, manual state management, or stale data.

As someone building modern apps with the MERN stack, I wanted a way to use Firestore like a boss — with real-time updates, caching, and minimal boilerplate.

So I built react-firestore-query

What is `react-firestore-query`?

react-firestore-query is a simple, powerful React hook that connects Firestore queries with React Query.

It gives you:

Real-time sync via Firestore's onSnapshot
Automatic caching using React Query
Suspense and SSR compatibility
TypeScript support out of the box

You just pass in a Firestore query (like query(collection(db, 'users'))), and it returns live, cached data — with error/loading states managed for you.

Installation

npm install react-firestore-query

Why Not Use `react-firebase-hooks`?

Good question!

While react-firebase-hooks is awesome, it doesn't integrate with React Query — which means:

No unified cache
No global devtools
No offline-first support
No custom stale times or retry logic

With react-firestore-query, you're combining Firebase's real-time power with React Query’s full ecosystem.

Example: Fetch Active Users in Real-Time

import { useFirestoreQuery } from 'react-firestore-query';
import { collection, query, where } from 'firebase/firestore';
import { db } from './firebase';

const usersQuery = query(collection(db, 'users'), where('active', '==', true));

export default function ActiveUsers() {
  const { data, isLoading, error } = useFirestoreQuery(['users', 'active'], usersQuery);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data?.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

It’s that simple.

No manual subscriptions. No useEffect. No state juggling.

How It Works (Under the Hood)

Uses Firestore's onSnapshot() for real-time data
Wraps it in a React Query useQuery() hook
Cleans up listeners on unmount
Automatically updates cache when data changes

You can even pass queryKey dependencies to manage separate cache buckets — just like in React Query.

Docs & GitHub

Try It Out, Star It, Share It

This package is still growing — and I’d love your feedback, issues, PRs, or just a star.

If you're building with Firebase + React, give react-firestore-query a try.

Let’s make Firestore a little more fun to work with.

Thanks for reading!
Follow me for more React + Firebase dev tips.

DEV Community: Sameer Ali

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

Why react-rte-light?

Features

Getting Started

Installation

Basic Usage

Controlled Mode (React 19 or 17)

Uncontrolled Mode

Customization

Custom Toolbar

Theming

Read-Only Mode

API Reference

Supported Toolbar Options

Why Draft.js?

Try It Out!

Contributing

Feedback

Conclusion

Effortless Firestore Queries in React with React Query

Effortless Firestore Queries in React with React Query

What is react-firestore-query?

Installation

Why Not Use react-firebase-hooks?

Example: Fetch Active Users in Real-Time

How It Works (Under the Hood)

Docs & GitHub

Try It Out, Star It, Share It

What is `react-firestore-query`?

Why Not Use `react-firebase-hooks`?