A utility for turning raw BBCode into React elements for React 18
npm install bbcode-to-react-18A utility for turning raw BBCode into React elements for React 18.
Install bbcode-to-react and peer dependencies via NPM
``sh`
npm install --save bbcode-to-react-18 react
Import bbcode-to-react-18, example:
`js
import React from "react";
import parser from "bbcode-to-react-18";
import { renderToString } from "react-dom/server";
const Example = (props) => {
return
{parser.toReact("[b]strong[/b]")}
;// render:
strong
Add new tag example
js
import React from "react";
import parser, { Tag } from "bbcode-to-react-18";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 ;
}
}
class BoldTag extends Tag {
toReact() {
// using this.getComponents() to get children components.
return {this.getComponents()};
}
}
parser.registerTag("youtube", YoutubeTag); // add new tag
parser.registerTag("b", BoldTag); // replace exists tag
const Example = (props) => {
return (
{parser.toReact(
'[youtube width="400"]https://www.youtube.com/embed/AB6RjNeDII0[/youtube]'
)}
);
};
`Development
Install dependencies:
sh
npm install
`Run examples at 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:
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.