@chainplatform/rich

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

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

[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

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

or:

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

For React Native CLI projects:

cd ios && pod install

Basic Usage

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

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

Supported theme keys:

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:

[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 protected][/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

@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

💖 Support & Donate

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

| Currency | Address | |----------------|----------| | MB Bank | MB Bank | | Bitcoin (BTC) | 17grbSNSEcEybS1nHh4TGYVodBwT16cWtc | | Ethereum (ETH) | 0xa2fd119a619908d53928e5848b49bf1cc15689d4 | | Tron (TRX) | TYL8p2PLCLDfq3CgGBp58WdUvvg9zsJ8pd | | DOGE (DOGE) | DDfKN2ys4frNaUkvPKcAdfL6SiVss5Bm19 | | USDT (SOLANA) | cPUZsb7T9tMfiZFqXbWbRvrUktxgZQXQ2Ni1HiVXgFm |

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