# @chainplatform/rich

> Reusable BBCode rich text editor for React Native and React Native Web.

Latest version **0.0.5** (published 2026-06-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @chainplatform/rich
pnpm add @chainplatform/rich
yarn add @chainplatform/rich
bun add @chainplatform/rich
```

## Health

**Score 50/100 (C)** — status: active.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2026-06-30 |
| First published | 2026-06-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 47.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Chain Platform |
| Maintainers | chainplatform |
| Keywords | react-native, react-native-web, rich-text, rich-text-editor, bbcode, bbcode-editor, text-editor, wysiwyg, chainplatform, @chainplatform/rich |

## Links

- npm: https://www.npmjs.com/package/@chainplatform/rich
- Repository: https://github.com/ChainPlatform/react-native-richtext-editor
- Issues: https://github.com/ChainPlatform/react-native-richtext-editor/issues
- npm.io page: https://npm.io/package/@chainplatform/rich

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.0.5 (latest) — 2026-06-30
- 0.0.4 — 2026-06-29
- 0.0.3 — 2026-06-29
- 0.0.2 — 2026-06-29
- 0.0.1 — 2026-06-29

## README

# @chainplatform/rich

Reusable BBCode rich text editor for **React Native** and **React Native Web**.

<p align="center">
  <a href="https://github.com/ChainPlatform/react-native-richtext-editor/blob/HEAD/LICENSE">
    <img src="https://img.shields.io/badge/license-MIT-blue.svg" />
  </a>
  <a href="https://www.npmjs.com/package/@chainplatform/rich">
    <img src="https://img.shields.io/npm/v/@chainplatform/rich?color=brightgreen&label=npm%20package" alt="Current npm package version." />
  </a>
  <a href="https://www.npmjs.com/package/@chainplatform/rich">
    <img src="https://img.shields.io/npm/dt/@chainplatform/tooltip.svg"></img>
  </a>
  <a href="https://www.npmjs.com/package/@chainplatform/rich">
    <img src="https://img.shields.io/badge/platform-android%20%7C%20ios%20%7C%20web-blue"></img>
  </a>
  <a href="https://github.com/ChainPlatform/react-native-richtext-editor/pulls">
    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
  </a>
  <a href="https://twitter.com/intent/follow?screen_name=doansan">
    <img src="https://img.shields.io/twitter/follow/doansan.svg?label=Follow%20@doansan" alt="Follow @doansan" />
  </a>
</p>

[![GitHub stars](https://img.shields.io/github/stars/ChainPlatform/react-native-richtext-editor?style=social)](https://github.com/ChainPlatform/react-native-richtext-editor)  
[![GitHub forks](https://img.shields.io/github/forks/ChainPlatform/react-native-richtext-editor?style=social)](https://github.com/ChainPlatform/react-native-richtext-editor)

`@chainplatform/rich` provides a lightweight editor that stores content as BBCode-like text.

```txt
[b]Bold[/b]
[i]Italic[/i]
[u]Underline[/u]

[list]
[*] Content 1
[*] Content 2
[/list]

[ol]
[*] Step 1
[*] Step 2
[/ol]
```

---

## Features

- React Native
- React Native Web
- Class Component
- No WebView
- No dependency on DraftJS / Quill
- BBCode based
- HTML renderer
- HTML helper
- Toolbar with SVG icons
- Undo / Redo
- Lists
- Tables
- Images
- Links
- Youtube
- Quote
- Code block
- Math
- Heading
- Alignment
- Color
- Font
- Size
- Export HTML
- Lightweight

---

## Install

```bash
npm install @chainplatform/rich @chainplatform/layout react-native-svg --save
```

or:

```bash
yarn add @chainplatform/rich @chainplatform/layout react-native-svg
```

For React Native CLI projects:

```bash
cd ios && pod install
```

---

## Basic Usage

```jsx
import React, { PureComponent } from "react";
import { View } from "react-native";
import { RichTextEditor, getHTMLContent } from "@chainplatform/rich";

export default class Example extends PureComponent {
    state = {
        content: ""
    };

    render() {
        return (
            <View>
                <RichTextEditor
                    value={this.state.content}
                    maxLength={5000}
                    minHeight={260}
                    placeholder="Enter content..."
                    onChangeText={(content) => this.setState({ content })}
                />
            </View>
        );
    }
}
```

---

## With Theme

```jsx
<RichTextEditor
    value={content}
    theme={theme}
    minHeight={280}
    onChangeText={setContent}
/>
```

Supported theme keys:

```js
theme.colors.border
theme.colors.text
theme.colors.text_muted
theme.colors.muted
theme.colors.card
theme.colors.background
theme.colors.primary_soft
theme.colors.error
```

---

Default insertions:

```txt
[url=][/url]
[img][/img]
```

---

## Supported BBCode Insertions

| Toolbar | BBCode |
| --- | --- |
| Bold | `[b]text[/b]` |
| Italic | `[i]text[/i]` |
| Underline | `[u]text[/u]` |
| Strike | `[s]text[/s]` |
| Superscript | `[sup]text[/sup]` |
| Subscript | `[sub]text[/sub]` |
| Math / inline code | `` `text` `` |
| Color | `[color=#ff0000]text[/color]` |
| Size | `[size=24]text[/size]` |
| Font | `[font=Arial]text[/font]` |
| Left | `[left]text[/left]` |
| Center | `[center]text[/center]` |
| Right | `[right]text[/right]` |
| HR | `[hr]` |
| Bullet list | `[list][*] item[/list]` |
| Ordered list | `[ol][*] item[/ol]` |
| Quote | `[quote]text[/quote]` |
| Code | `[code]text[/code]` |
| Table | `[table][tr][td]text[/td][/tr][/table]` |
| Link | `[url=https://example.com]text[/url]` |
| Email | `[email]email@example.com[/email]` |
| Image | `[img]https://example.com/image.jpg[/img]` |
| YouTube | `[youtube]video-id[/youtube]` |

---

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | `''` | Editor value |
| `onChangeText` | `(value: string) => void` | `undefined` | Called when value changes |
| `onChange` | `(value: string) => void` | `undefined` | Alias callback for value changes |
| `placeholder` | `string` | `'Nhập nội dung...'` | Placeholder text |
| `minHeight` | `number` | `0` | Minimum editor input height |
| `maxLength` | `number` | `5000` | Maximum text length |
| `editable` | `boolean` | `true` | Enable or disable editing |
| `theme` | `object` | `undefined` | Chain Platform compatible theme |
| `style` | `object \| array` | `null` | Wrapper style |
| `containerStyle` | `object \| array` | `null` | Wrapper style alias |
| `toolbarStyle` | `object \| array` | `null` | Toolbar style |
| `inputStyle` | `object \| array` | `null` | TextInput style |
| `onUndo` | `() => void` | `undefined` | Custom undo handler |
| `onRedo` | `() => void` | `undefined` | Custom redo handler |

---

## Package Structure

```txt
@chainplatform/rich
├── src
│   ├── RichTextEditor.js
│   ├── RichTextToolbarSVG.js
│   └── HTMLHelpers.js
├── index.js
├── package.json
├── README.md
└── LICENSE
```

---

## Notes

The editor stores formatted content as plain BBCode text. Convert and sanitize generated HTML before rendering untrusted user content. Please use getHTMLContent function.

---

## License

MIT © 2026 [Chain Platform](https://chainplatform.net)

---

## 💖 Support & Donate

If you find this package helpful, consider supporting the development:

| Currency | Address |
|----------------|----------|
| **MB Bank** | `MB Bank` |
![alt text](imgs/qr.png)
| **Bitcoin (BTC)** | `17grbSNSEcEybS1nHh4TGYVodBwT16cWtc` |
![alt text](imgs/image-1.png)
| **Ethereum (ETH)** | `0xa2fd119a619908d53928e5848b49bf1cc15689d4` |
![alt text](imgs/image-2.png)
| **Tron (TRX)** | `TYL8p2PLCLDfq3CgGBp58WdUvvg9zsJ8pd` |
![alt text](imgs/image.png)
| **DOGE (DOGE)** | `DDfKN2ys4frNaUkvPKcAdfL6SiVss5Bm19` |
| **USDT (SOLANA)** | `cPUZsb7T9tMfiZFqXbWbRvrUktxgZQXQ2Ni1HiVXgFm` |

Your contribution helps maintain open-source development under the Chain Platform ecosystem 🚀

---
_Source: https://npm.io/package/@chainplatform/rich · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._