Tags
On this page
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.
For developers looking for a quick solution or a proof of concept, you might consider this method this. If you want to replace the standard <p>
tags with <div>
tags in your content, you can do it as follows:
<RichTextRenderer
node={text?.json}
overwrites={{
paragraph: ({children}) => <div className="myCustomRichTextParagraph">{children}</div>,
}}
/>
More advanced use case is for example to support linked assets or documents.
Therefor you need to fetch the connections and the json from the graphql API.
So the RichTextRenderer might look like this
<RichTextRenderer
node={text?.json}
overwrites={{
documentLink: (props) =>
props?.node && text?.connections ? (
<DocumentLink node={props.node} connections={text.connections} />
) : null,
}}
/>
Where your DocumentLink and Asset component would look like this, to render a linked Asset:
export const Asset: React.FC<IAsset> = ({ src, description }) => {
return (
<>
{src && (
<img
loading="lazy"
src={`${src}?w=1920&h=960`}
srcSet={`${src}?w=3840&h=1920 1920w, ${src}?w=1920&h=960 1280w, ${src}?w=1280&h=640 640w`}
alt={description ?? ""}
/>
)}
</>
);
};
export const DocumentLink: React.FC<IDocumentLink> = ({ connections, node, children }) => {
return (
<>
{connections?.map(
(component: IGenAsset) =>
component?.__typename == "Asset" &&
node?.attrs?.documentId == component.id && <Asset key={component.id} {...component} />,
)}
{children}
</>
);
};
In case you linked an Asset you will always get __typename Asset
- if the user can link other blueprints, you can expert there APIName here as __typename
and check by for them. Remember you can pick the right connection, by matching the id from the connection to the documentId in the rich-text. The example above is using a graphql query partly like this:
text {
json
connections {
__typename
... on Asset {
title
src
keywords
id
description
copyright
author
}
}
}
This should just give an idea, how to use the rich-text library we provide. You could replace the img component with the image component from Next.js. If you want to learn more about how to render images in the web, here is good place to look:
Tags
On this page