How to create own bbcode preset with react component

[andrxscs]

Hello,

I need to know if the package offers the possibility that when passing a bbcode for example [spoiler] content [/ spoiler], use an existing component in react as <SpoilerCustomTag content = {node.content} /> and that within that component it is return the respective JSX to render.

This is because spoilers require an open or closed button.

Thanks.

EDIT.

Custom preset

const myPreset = reactPreset.extend((tags, options) => ({
  ...tags,
  spoiler: (node) => ({
    ...node,
    tag: () => test(node.content)
  })
}));

Application

const App = () => (
  <BBCode plugins={myPreset()}>
    [spoiler][b]test[/b][/spoiler]
  </BBCode>
);

Spoiler Custom Component with state

const test = (content) => {
  const [open, setOpen] = useState(false);
  return open ? (
    <div>{content}</div>
  ) : (
    <button onClick={() => setOpen(true)}>Open</button>
  );
};

The problem is when spoiler bbocde has another bbcodes inside, the error is the next:
Invariant Violation
Objects are not valid as a React child (found: object with keys {tag, attrs, content}). If you meant to render a collection of children, use an array instead.

@JiLiZART

[JiLiZART]

Hi, now you can only pass children as react components. But it's good idea to render node.content and pass as attribute (I create issue for ipmplementing this)

I improved your code (with children) https://codesandbox.io/s/great-rhodes-rrkn0?file=/src/App.js