bbcode-to-react
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/bbcode-to-react package

0.2.9 • Public • Published

bbcode-to-react

A utility for turning raw BBCode into React elements.

Installation

Install bbcode-to-react and peer dependencies via NPM

npm install --save bbcode-to-react react

Import bbcode-to-react, example:

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

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:

npm install

Run examples at http://localhost:8080/ with webpack dev server:

npm start

Run tests & coverage report:

npm test

Watch tests:

npm run test-watch

Credits

  • bbcodejs: bbcode-to-react uses the parser from bbcodejs, so much of the credit is due there.
  • reactstrap: bbcode-to-react uses the webpack config and publish scripts from reactstrap.

Package Sidebar

Install

npm i bbcode-to-react

Weekly Downloads

1,723

Version

0.2.9

License

MIT

Unpacked Size

308 kB

Total Files

27

Last publish

Collaborators

  • jimliu