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.