@mshafiqyajid/react-rich-text
Headless rich text hook and styled component. contentEditable-based WYSIWYG editor. Bold, italic, underline, strikethrough, lists, alignment. No external deps.
Playground #
Props
TSX
import { RichTextStyled } from "@mshafiqyajid/react-rich-text/styled";
import "@mshafiqyajid/react-rich-text/styles.css";
<RichTextStyled
value={value}
onChange={setValue}
/>Install #
npm install @mshafiqyajid/react-rich-textQuick start #
import { RichTextStyled } from "@mshafiqyajid/react-rich-text/styled";
import "@mshafiqyajid/react-rich-text/styles.css";
const [html, setHtml] = useState("");
<RichTextStyled
value={html}
onChange={setHtml}
placeholder="Write something..."
tone="primary"
/>API #
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Controlled HTML string |
| defaultValue | string | "" | Uncontrolled initial HTML |
| onChange | (html) => void | — | Called on content change |
| placeholder | string | — | Placeholder text when empty |
| showToolbar | boolean | true | Show formatting toolbar |
| toolbarItems | ToolbarItem[] | all | Which toolbar buttons to show |
| minHeight | string | "120px" | Minimum editor height |
| maxHeight | string | — | Maximum editor height (scrolls) |
| size | "sm" | "md" | "lg" | "md" | Font and padding size |
| tone | "neutral" | "primary" | "neutral" | Accent color |
| disabled | boolean | false | Make editor read-only |
| onFocus | () => void | — | Focus callback |
| onBlur | () => void | — | Blur callback |
| wordCount | boolean | false | Show word/character count |
| spellCheck | boolean | true | Enable spell check |
| allowedTags | string[] | — | Allowed HTML tag whitelist |