{"id":51115210,"url":"https://github.com/sameer52718/react-rte-light","last_synced_at":"2026-06-24T21:01:27.899Z","repository":{"id":366218063,"uuid":"1037279885","full_name":"sameer52718/react-rte-light","owner":"sameer52718","description":"A lightweight, TypeScript-based rich text editor for React 16.8 to 19. Built with Draft.js, it offers core editing features (bold, italic, headings, lists, etc.), customizable toolbars, theming via CSS variables, and accessibility support. Tree-shakable, with ESM and CommonJS builds, it’s a flexible, minimal-dependency alternative to React Quill.","archived":false,"fork":false,"pushed_at":"2025-08-13T10:46:58.000Z","size":10,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-20T20:27:14.097Z","etag":null,"topics":["draftjs","frontend","npm","react","reactcomponent","richtexteditor","typescript","ui","webdevelopment","wysiwyg"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-rte-light","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sameer52718.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-13T10:34:52.000Z","updated_at":"2026-01-21T19:32:53.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/sameer52718/react-rte-light","commit_stats":null,"previous_names":["sameer52718/react-rte-light"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/sameer52718/react-rte-light","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sameer52718%2Freact-rte-light","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sameer52718%2Freact-rte-light/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sameer52718%2Freact-rte-light/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sameer52718%2Freact-rte-light/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sameer52718","download_url":"https://codeload.github.com/sameer52718/react-rte-light/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sameer52718%2Freact-rte-light/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34749211,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-24T02:00:07.484Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["draftjs","frontend","npm","react","reactcomponent","richtexteditor","typescript","ui","webdevelopment","wysiwyg"],"created_at":"2026-06-24T21:01:26.824Z","updated_at":"2026-06-24T21:01:27.880Z","avatar_url":"https://github.com/sameer52718.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-rte-light\n\nA lightweight, production-ready rich text editor component for React, compatible with React 16.8 to 19. Built with [Draft.js](https://draftjs.org/), it provides essential rich text editing features with a focus on simplicity, flexibility, and performance. The package supports ESM and CommonJS builds, is tree-shakable, and includes TypeScript definitions for seamless integration into modern React projects.\n\n## Features\n\n- **Core Editing**: Bold, italic, underline, strike-through, headings (H1, H2), links, blockquotes, ordered/unordered lists, and code blocks.\n- **Customizable Toolbar**: Configure the toolbar via props to include only the desired controls.\n- **Controlled and Uncontrolled Modes**: Use with `value` and `onChange` for controlled mode or `defaultValue` for uncontrolled mode.\n- **Keyboard Shortcuts**: Supports standard shortcuts (e.g., `Ctrl+B` for bold, `Ctrl+I` for italic).\n- **Theming**: Built-in light and dark themes, plus custom theming via CSS variables.\n- **Accessibility**: Includes ARIA roles and keyboard navigation for better accessibility.\n- **Lightweight**: Minimal dependencies (only Draft.js and draft-convert), no reliance on heavy frameworks like Quill.\n- **TypeScript Support**: Full type definitions included for type-safe development.\n- **Builds**: Supports both ESM and CommonJS, optimized for tree-shaking.\n\n## Installation\n\nInstall the package via npm:\n\n```bash\nnpm install react-rte-light --legacy-peer-deps\n```\n\n\u003e **Note**: Use `--legacy-peer-deps` to handle peer dependency conflicts, especially with React 19 and Draft.js.\n\nImport the styles in your application:\n\n```tsx\nimport 'react-rte-light/dist/index.css';\n```\n\n## Usage\n\n### Basic Example\n\n```tsx\nimport { RichTextEditor } from 'react-rte-light';\n\nfunction App() {\n  return \u003cRichTextEditor placeholder=\"Start typing...\" /\u003e;\n}\n```\n\n### Controlled Mode (React 19 or 17)\n\nWorks the same way in React 19 and React 17 due to backward compatibility:\n\n```tsx\nimport { useState } from 'react';\nimport { RichTextEditor } from 'react-rte-light';\n\nfunction ControlledEditor() {\n  const [value, setValue] = useState('\u003cp\u003eInitial content\u003c/p\u003e');\n\n  return (\n    \u003cRichTextEditor\n      value={value}\n      onChange={setValue}\n      placeholder=\"Type your content...\"\n    /\u003e\n  );\n}\n```\n\n### Uncontrolled Mode\n\n```tsx\nimport { RichTextEditor } from 'react-rte-light';\n\nfunction UncontrolledEditor() {\n  return (\n    \u003cRichTextEditor\n      defaultValue=\"\u003cp\u003eDefault content\u003c/p\u003e\"\n      onChange={(value) =\u003e console.log('Content:', value)}\n    /\u003e\n  );\n}\n```\n\n### Customization Examples\n\n- **Custom Toolbar**: Limit the toolbar to specific options.\n\n```tsx\nimport { RichTextEditor } from 'react-rte-light';\n\nfunction CustomToolbar() {\n  const toolbarOptions = ['bold', 'italic', 'link', 'unordered-list'];\n  return \u003cRichTextEditor toolbarOptions={toolbarOptions} /\u003e;\n}\n```\n\n- **Theming**: Use built-in themes or define a custom theme with CSS variables.\n\n```tsx\nimport { RichTextEditor } from 'react-rte-light';\n\nfunction ThemedEditor() {\n  // Built-in dark theme\n  return \u003cRichTextEditor theme=\"dark\" /\u003e;\n}\n\nfunction CustomThemedEditor() {\n  // Custom theme via CSS variables\n  const customTheme = {\n    '--editor-bg': '#f0f0f0',\n    '--editor-text': '#333',\n    '--link-color': 'green',\n  };\n  return \u003cRichTextEditor theme={customTheme} /\u003e;\n}\n```\n\n- **Read-Only Mode**: Display content without editing capabilities.\n\n```tsx\nimport { RichTextEditor } from 'react-rte-light';\n\nfunction ReadOnlyEditor() {\n  return (\n    \u003cRichTextEditor\n      readOnly={true}\n      value=\"\u003cp\u003eThis is read-only content.\u003c/p\u003e\"\n    /\u003e\n  );\n}\n```\n\n## API\n\nThe `RichTextEditor` component accepts the following props:\n\n```tsx\ninterface RichTextEditorProps {\n  value?: string; // HTML string for controlled mode\n  defaultValue?: string; // HTML string for uncontrolled mode\n  onChange?: (value: string) =\u003e void; // Called with updated HTML content\n  toolbarOptions?: ToolbarOption[]; // Array of toolbar buttons\n  readOnly?: boolean; // Disables editing if true\n  theme?: 'light' | 'dark' | CustomTheme; // Theme selection\n  placeholder?: string; // Placeholder text\n  className?: string; // Additional CSS class for the editor\n}\n\ntype ToolbarOption =\n  | 'bold'\n  | 'italic'\n  | 'underline'\n  | 'strikethrough'\n  | 'header-one'\n  | 'header-two'\n  | 'blockquote'\n  | 'ordered-list'\n  | 'unordered-list'\n  | 'code-block'\n  | 'link';\n\ninterface CustomTheme extends Record\u003cstring, string\u003e {}\n```\n\n### Available Toolbar Options\n- `bold`: Bold text (`Ctrl+B`).\n- `italic`: Italic text (`Ctrl+I`).\n- `underline`: Underline text (`Ctrl+U`).\n- `strikethrough`: Strike-through text.\n- `header-one`: H1 heading.\n- `header-two`: H2 heading.\n- `blockquote`: Blockquote.\n- `ordered-list`: Numbered list.\n- `unordered-list`: Bulleted list.\n- `code-block`: Code block.\n- `link`: Insert/edit hyperlinks (prompts for URL).\n\n## Contributing\nContributions are welcome! Follow these steps:\n1. Fork the repository.\n2. Create a feature branch (`git checkout -b feature/your-feature`).\n3. Commit changes (`git commit -m \"Add your feature\"`).\n4. Push to the branch (`git push origin feature/your-feature`).\n5. Open a pull request.\n\nPlease include tests for new features and ensure the code follows the existing TypeScript and ESLint standards.\n\n## License\nMIT License. See [LICENSE](LICENSE) for details.\n\n## Acknowledgements\n- Built with [Draft.js](https://draftjs.org/) for the editing engine.\n- Uses [Vite](https://vitejs.dev/) for fast and optimized builds.\n- Tested with [Vitest](https://vitest.dev/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsameer52718%2Freact-rte-light","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsameer52718%2Freact-rte-light","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsameer52718%2Freact-rte-light/lists"}