## Packages
| Package | Status | Size | Description |
|----------------------|------------------------------------------------------------|-----------------------------|---------------------------|
| @bbob/react | [![@bbob/react-status]][@bbob/react-package] | ![@bbob/react-size] | React renderer |
| @bbob/preset-react | [![@bbob/preset-react-status]][@bbob/preset-react-package] | ![@bbob/preset-react-size] | React default tags preset |
| @bbob/vue2 | [![@bbob/vue2-status]][@bbob/vue2-package] | ![@bbob/vue2-size] | Vue 2 renderer |
| @bbob/preset-vue | [![@bbob/preset-vue-status]][@bbob/preset-vue-package] | ![@bbob/preset-vue-size] | Vue default tags preset |
| @bbob/html | [![@bbob/html-status]][@bbob/html-package] | ![@bbob/html-size] | HTML renderer |
| @bbob/preset-html5 | [![@bbob/preset-html5-status]][@bbob/preset-html5-package] | ![@bbob/preset-html5-size] | HTML5 default tags preset |
| @bbob/core | [![@bbob/core-status]][@bbob/core-package] | ![@bbob/core-size] | Core package |
[@bbob/core-status]: https://img.shields.io/npm/v/@bbob/core.svg
[@bbob/react-status]: https://img.shields.io/npm/v/@bbob/react.svg
[@bbob/preset-react-status]: https://img.shields.io/npm/v/@bbob/preset-react.svg
[@bbob/vue2-status]: https://img.shields.io/npm/v/@bbob/vue2.svg
[@bbob/preset-vue-status]: https://img.shields.io/npm/v/@bbob/preset-vue.svg
[@bbob/html-status]: https://img.shields.io/npm/v/@bbob/html.svg
[@bbob/preset-html5-status]: https://img.shields.io/npm/v/@bbob/preset-html5.svg
[@bbob/core-size]: https://badgen.net/bundlephobia/minzip/@bbob/core
[@bbob/react-size]: https://badgen.net/bundlephobia/minzip/@bbob/react
[@bbob/preset-react-size]: https://badgen.net/bundlephobia/minzip/@bbob/preset-react
[@bbob/vue2-size]: https://badgen.net/bundlephobia/minzip/@bbob/vue2
[@bbob/preset-vue-size]: https://badgen.net/bundlephobia/minzip/@bbob/preset-vue
[@bbob/html-size]: https://badgen.net/bundlephobia/minzip/@bbob/html
[@bbob/preset-html5-size]: https://badgen.net/bundlephobia/minzip/@bbob/preset-html5
[@bbob/core-package]: https://npmjs.com/package/@bbob/core
[@bbob/react-package]: https://npmjs.com/package/@bbob/react
[@bbob/preset-react-package]: https://npmjs.com/package/@bbob/preset-react
[@bbob/vue2-package]: https://npmjs.com/package/@bbob/vue2
[@bbob/preset-vue-package]: https://npmjs.com/package/@bbob/preset-vue
[@bbob/html-package]: https://npmjs.com/package/@bbob/html
[@bbob/preset-html5-package]: https://npmjs.com/package/@bbob/preset-html5
[DEMO Playground](https://codepen.io/JiLiZART/full/vzMvpd)
## Table of contents
* [Usage](#usage)
* [Basic usage](#basic-usage)
* [React usage](#react-usage)
* [Vue 2 usage](#vue2-usage)
* [Parse Options](#parse-options)
* [Presets](#presets)
* [Create your own preset](#create-preset)
* [HTML Preset](#html-preset)
* [React Preset](#react-preset)
* [React usage](#react)
* [Component](#react-component)
* [Render prop](#react-render)
* [PostHTML usage](#posthtml)
* [Create Plugin](#plugin)
* [Benchmarks](#benchmarks)
### Basic usage
```shell
npm i @bbob/html @bbob/preset-html5
```
```js
import bbobHTML from '@bbob/html'
import presetHTML5 from '@bbob/preset-html5'
const processed = bbobHTML(`[i]Text[/i]`, presetHTML5())
console.log(processed); // Text
```
### React usage
```shell
npm i @bbob/react @bbob/preset-react
```
```jsx
import React from 'react'
import BBCode from '@bbob/react';
import presetReact from '@bbob/preset-react';
const plugins = [presetReact()];
export default () => (
[b]Text[/b]``` #### enableEscapeTags Enable escape support for tags ```js import bbobHTML from '@bbob/html' import presetHTML5 from '@bbob/preset-html5' const processed = bbobHTML(`[b]Text[/b]'\\[b\\]Text\\[/b\\]'`, presetHTML5(), { enableEscapeTags: true }) console.log(processed); // Text[b]Text[/b] ``` ### Presets Its a way to transform parsed BBCode AST tree to another tree by rules in preset #### Create your own preset ```js import { createPreset } from '@bbob/preset' export default createPreset({ quote: (node) => ({ tag: 'blockquote', attrs: node.attrs, content: [{ tag: 'p', attrs: {}, content: node.content, }], }), }) ``` #### HTML Preset Also you can use predefined preset for HTML ```js import html5Preset from '@bbob/preset-html5/es' import { render } from '@bbob/html/es' import bbob from '@bbob/core' console.log(bbob(html5Preset()).process(`[quote]Text[/quote]`, { render }).html) //
``` #### React Preset Also you can use predefined preset for React ```js import reactPreset from "@bbob/preset-react"; import reactRender from "@bbob/react/es/render"; const preset = reactPreset.extend((tags, options) => ({ ...tags, quote: node => ({ tag: "blockquote", content: node.content }) })); const result = reactRender(`[quote]Text[/quote]`, reactPreset()); /* It produces a VDOM Nodes equal to React.createElement('blockquote', 'Text') */ document.getElementById("root").innerHTML = JSON.stringify(result, 4); ``` [](https://codesandbox.io/s/lp7q9yj0lq) ### React usage #### Component Or you can use React Component ```js import React from 'react' import { render } from 'react-dom' import BBCode from '@bbob/react/es/Component' import reactPreset from '@bbob/preset-react/es' const MyComponent = () => (Text
Text