A React Rich Text Editor component
npm install @ryzeup/richtexteditor!NPM Version
!License
!Build
!Vite
!TypeScript
> β¨ A lightweight, fully customizable Rich Text Editor for React β built with TypeScript, Vite, and React 19.
> Create visually appealing messages with custom fonts, colors, media, and more β in just a few lines of code.
---
β
Built with React + TypeScript
β
Bundled using Vite (super fast builds)
β
Customizable toolbar β bold, italic, underline, color, alignment, etc.
β
Supports images, links, videos, and emojis
β
Includes TypeScript types
β
CSS bundled or importable separately
β
Lightweight & dependency-minimal
β
Plug-and-play usage
---
``bashUsing npm
npm install @ryzeup/richtexteditor
---
Make sure your project includes React:
npm install react react-dom
---
1οΈβ£ Import the component
import React from 'react';
import { RichTextEditor } from 'texteditor';
import 'texteditor/dist/style.css'; // import styles if not auto-bundled
2οΈβ£ Use it in your app
function App() {
return (
showOutput={true}
showPreview={true}
toolbarConfig={{
link: true,
image: true,
emoji: true,
table: true,
color: true,
fontFamily: true,
fontSize: true,
}}
/>
);
}
export default App;
---
The RichTextEditor component is fully customizable via the following props:
Prop Type Default Description
atSuggestions string[] [] List of mention suggestions (e.g., ["@Arshad", "@Irfan", "@Meera""]). When the user types β@β, a popup appears showing these names.
showOutput boolean false Displays a live HTML preview of the editorβs content below the editor box. Useful for debugging or data preview.
showPreview boolean false Displays a rendered HTML preview beside the editor (using
toolbarConfig ToolbarConfig All false Controls which toolbar actions are visible. Example: { link: true, image: true, emoji: true }.
classNames { wrapper?: string; toolbar?: string; editor?: string; preview?: string; output?: string } {} Custom class names for different sections of the editor (useful for applying your own CSS).
styles { wrapper?: React.CSSProperties; toolbar?: React.CSSProperties; editor?: React.CSSProperties; preview?: React.CSSProperties; output?: React.CSSProperties } {} Inline styles for each section (wrapper, toolbar, editor, etc.).
handleGetHtml (html: string) => void () => {} Callback triggered whenever the editorβs HTML content changes. Returns sanitized HTML.
---
You can control toolbar buttons selectively via this object:
Key Type Default Description
link boolean false Enables inserting hyperlinks.
image boolean false Enables inserting images (from local files).
emoji boolean false Enables emoji picker.
table boolean false Enables inserting and resizing tables.
color boolean false Enables text color picker.
fontFamily boolean false Enables font family dropdown.
fontSize boolean false Enables font size dropdown.
---
If you cloned or downloaded this repository, use the following scripts:
The build will output into the dist/ folder:
dist/
βββ index.js (CommonJS build)
βββ index.esm.js (ES Module build)
βββ index.d.ts (TypeScript types)
βββ style.css (Editor styles)
---
---
React 19
TypeScript
Vite 7
ESLint
React Icons
Rollup (via Vite) for library bundling
---
If your build does not automatically include styles:
import 'texteditor/dist/style.css';
Option 2 β Automatic Bundling
If you import your CSS in src/index.ts:
import './style.css';
Vite will automatically bundle your styles in the JS build.
---
---
---
π§Ύ License
This project is licensed under the MIT License β free for personal and commercial use.
π¬ Author - Ryzeup team
π¨βπ» Ryzeup
``