rte-react

A lightweight, fully-typed React rich text editor with a configurable toolbar. Outputs clean HTML. Works with React 17 and higher.

Install

npm install rte-react

Usage

import { RichEditor } from 'rte-react';
import 'rte-react/styles';

function App() {
  const [content, setContent] = useState('<p>Hello world</p>');

  return (
    <RichEditor
      value={content}
      onChange={setContent}
      placeholder="Start typing..."
    />
  );
}

Custom Toolbar

Pass a toolbar prop to control which tools are shown:

<RichEditor
  value={content}
  onChange={setContent}
  toolbar={['bold', 'italic', 'underline', 'divider', 'bulletList', 'orderedList', 'divider', 'link']}
/>

Available Tools

Tool	Description
bold	Bold text
italic	Italic text
underline	Underline text
strikethrough	Strikethrough text
heading1 – heading6	Headings
bulletList	Bullet list
orderedList	Numbered list
blockquote	Blockquote
codeBlock	Code block
link	Insert/edit link
image	Insert image by URL
table	Insert 3x3 table
undo	Undo
redo	Redo
divider	Visual separator in toolbar

Props

Prop	Type	Default	Description
value	string	''	HTML content
onChange	(html: string) => void	—	Called on content change
toolbar	ToolbarTool[]	All tools	Tools to show in toolbar
placeholder	string	'Start typing...'	Placeholder text
editable	boolean	true	Enable/disable editing
className	string	—	Class for outer wrapper
toolbarClassName	string	—	Class for toolbar
contentClassName	string	—	Class for content area
style	CSSProperties	—	Inline style for wrapper

License

MIT