RichTextEditor React Component Library v0.0.1

A modern, customizable rich text editor React component with toolbar, link support, and list formatting. Built with TypeScript and Lucide icons.

Live Playground

Try the rich text editor live at: https://rich-text-editor-lib.vercel.app/

Features

The rich text editor includes:

• Bold, Italic, Underline, Strikethrough formatting
• Bullet lists and Numbered lists
• Insert/Edit links with popup
• Customizable placeholder
• Reset editor button
• Accessible and keyboard-friendly
• Dark mode styling (customizable)
• Error message display
• Custom className and style support
• Lucide icons toolbar

Installation

npm install rich-text-editor-lib lucide-react

Note: react, react-dom, and lucide-react are peer dependencies.

Usage

import React, { useState } from 'react';
import { RichTextEditor } from "rich-text-editor-lib";
import "rich-text-editor-lib/dist/index.css";

function MyForm() {
  const [value, setValue] = useState('');
  return (
    <RichTextEditor
      name="my-editor"
      value={value}
      onChange={setValue}
      placeholder="Type some rich text..."
      className="max-w-[600px] w-full"
    />
  );
}

Props

| Prop | Type | Required | Description | |--------------|-------------------------------------------|----------|-----------------------------------| | name | string | Yes | Name for accessibility | | value | string | Yes | HTML content value | | onChange | (value: string) => void | Yes | Called with new HTML on change | | onBlur | (e: React.FocusEvent<HTMLDivElement>) | No | Blur event handler | | placeholder| string | No | Placeholder text | | error | string | No | Error message (shows in red) | | className | string | No | Custom classes for root wrapper | | style | React.CSSProperties | No | Custom styles for root wrapper |

Styling

• The editor is styled for dark backgrounds by default using included CSS (rich-text-editor.css).
• You can override styles by passing a className or style prop.
• The toolbar uses Lucide icons.
• User content inside the editor is styled via global CSS selectors, not utility classes.

Development

• Clone the repo and run the demo app:

  npm install
  npm run dev

• To build the library:

  npm run build

• The demo imports the built library from dist/.

License

MIT

Contributors

• Adarsh Viswam