bbcode-to-react-components v1.0.0

bbcode-to-react - fork

This repository is a fork of the original https://github.com/JimLiu/bbcode-to-react by Junmin Liu. The fork has been updated to provide compatibility with React 18 and aims for 'some' maintenance.

bbcode-to-react is a versatile utility that allows you to convert raw BBCode into React elements seamlessly.

Updates

06-02-2023 - Font size mapping - Some bb codes contains size=large parameter, which were not supported. A props system was created to allow future quick|small customization to specific needs on tags.

parser.setProps({
  fontSizes: {
    "small": "0.8em",
    "medium": "1em",
    "large": "1.2em",
  }
})

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.