Package Exports

@geraldcloudnine/bbcode-to-react
@geraldcloudnine/bbcode-to-react/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@geraldcloudnine/bbcode-to-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.