# bbcode-to-react

> A utility for turning raw BBCode into React elements.

Latest version **0.2.9** (published 2018-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install bbcode-to-react
pnpm add bbcode-to-react
yarn add bbcode-to-react
bun add bbcode-to-react
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.9 |
| Published | 2018-04-24 |
| First published | 2016-10-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/bbcode-to-react) |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 300.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 24 |
| Maintainers | jimliu |
| Keywords | bbcode, react, bbcode parser |

## Links

- npm: https://www.npmjs.com/package/bbcode-to-react
- Repository: https://github.com/JimLiu/bbcode-to-react
- Homepage: https://github.com/JimLiu/bbcode-to-react#readme
- Issues: https://github.com/JimLiu/bbcode-to-react/issues
- npm.io page: https://npm.io/package/bbcode-to-react

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.9 (latest) — 2018-04-24
- 0.2.8 — 2018-03-02
- 0.2.7 — 2017-11-07
- 0.2.6 — 2016-11-01
- 0.2.5 — 2016-11-01
- 0.2.4 — 2016-11-01
- 0.2.2 — 2016-11-01
- 0.2.1 — 2016-10-29
- 0.1.1 — 2016-10-28

## README

# bbcode-to-react

A utility for turning raw BBCode into React elements.

## Installation

Install `bbcode-to-react` and __peer dependencies__ via NPM

```sh
npm install --save bbcode-to-react react
```

Import `bbcode-to-react`, example:

```js
import React from 'react';
import parser from 'bbcode-to-react';
import { renderToString } from 'react-dom/server';

const Example = (props) => {
  return (
    <p>{parser.toReact('[b]strong[/b]')}</p>
  );
}

// render: <p><strong>strong</strong></p>
console.log(renderToString(<Example />));


```

## Add new tag example

```js
import React from 'react';
import parser, { Tag } from 'bbcode-to-react';

class YoutubeTag extends Tag {
  toReact() {
    // using this.getContent(true) to get it's inner raw text.
    const attributes = {
      src: this.getContent(true),
      width: this.params.width || 420,
      height: this.params.height || 315,
    };
    return (
      <iframe
        {...attributes}
        frameBorder="0"
        allowFullScreen
      />
    );
  }
}

class BoldTag extends Tag {
  toReact() {
    // using this.getComponents() to get children components.
    return (
      <b>{this.getComponents()}</b>
    );
  }
}

parser.registerTag('youtube', YoutubeTag); // add new tag
parser.registerTag('b', BoldTag); // replace exists tag

const Example = (props) => {
  return (
    <p>{parser.toReact('[youtube width="400"]https://www.youtube.com/embed/AB6RjNeDII0[/youtube]')}</p>
  );
}

```

## Development

Install dependencies:

```sh
npm install
```

Run examples at [http://localhost:8080/](http://localhost:8080/) with webpack dev server:

```sh
npm start
```

Run tests & coverage report:

```sh
npm test
```

Watch tests:

```sh
npm run test-watch
```

# Credits

* **bbcodejs:** `bbcode-to-react` uses the parser from [bbcodejs](https://github.com/vishnevskiy/bbcodejs), so much of the credit is due there.
* **reactstrap:** `bbcode-to-react` uses the webpack config and publish scripts from [reactstrap](https://github.com/reactstrap/reactstrap).

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