Tags
Our rich text format is defined by a JSON structure. This is handy for rendering on different platforms: Web, Android, iOS, etc.
For React, there is a helper library that makes the integration process of rich texts very simple.
To install, use npm or another package manager:
npm install @caisy/rich-text-react-renderer --save
For ease of use, just pass the JSON and the component will convert it to JSX:
import { RichTextRenderer } from "@caisy/rich-text-react-renderer";
...
const node = BlogArticle.text.json;
return (
<>
<RichTextRenderer node={node} />
</>
);
};
To ensure that you pass the correct object, it should contain something like this:
{ type: "doc", ... }
If you want to override some subcomponents as they are rendered, you can pass some overrides as follows:
<RichTextRenderer
node={textContent}
overwrites={
{
paragraph: ParagraphOverwrite,
text: TextOverwrite,
listItem: ListItemOverwrite,
}
}
/>
To overwrite subcomponents of the rich text like:
lists
paragraphs
tables
etc.
Tags