Introducing the GraphCMS React Rich Text Renderer

João Pedro Schmitz
João Pedro Schmitz

May 25, 2021

Introducing the GraphCMS React Rich Text Renderer

We've often come across community members working with the Rich Text field in GraphCMS and looking for a simple solution to render their content. Especially when working with React. There wasn't a single go-to solution for this. So we built one!

The project is open-source, so if you're keen to contribute - all types of contributions are welcome, such as bug fixes, issues, or feature requests. You can check out the repo on GitHub or NPM.

Packages

Currently, there are two packages available.

Getting started

You can get it on npm or Yarn.

# npm
npm i @graphcms/rich-text-react-renderer
# Yarn
yarn add @graphcms/rich-text-react-renderer

Usage

To render the content on your application, you'll need to provide the array of elements returned from the GraphCMS API to the RichText component.

import { RichText } from '@graphcms/rich-text-react-renderer';
const content = {
children: [
{
type: 'paragraph',
children: [
{
bold: true,
text: 'Hello World!',
},
],
},
],
};
const App = () => {
return <RichText content={content} />;
};

The content from the example above will render:

<p>
<b>Hello world!</b>
</p>

Custom elements

By default, the elements won't have any styling, despite the IFrame, which we designed to be responsive. But if you have, for example, a design system and want to use your own components with styling, you can pass a renderers prop to the RichText component. Let's see an example:

import { RichText } from '@graphcms/rich-text-react-renderer';
const App = () => {
return (
<div>
<RichText
children={content}
renderers={{
h1: ({ children }) => <h1 className="text-white">{children}</h1>,
bold: ({ children }) => <strong>{children}</strong>,
}}
/>
</div>
);
};

You can find the full list of elements you can customize in this link, alongside the props available for each of them.

TypeScript

If you are using TypeScript in your project, we highly recommend you install the @graphcms/rich-text-types package. It contains types for the elements, alongside the props accepted by each of them. You can use them in your application to create custom components.

Integrating with Next.js

The best part about having custom elements support is that you can integrate it with Next.js or Gatsby, for example. The code below shows a custom link element that uses the NextLink component for internal links.

import Link from 'next/link';
import { RichText } from '@graphcms/rich-text-react-renderer';
const content = {
children: [
{
type: 'paragraph',
children: [
{
bold: true,
text: 'Hello World!',
},
],
},
],
};
const App = () => {
return (
<RichText
content={content}
renderers={{
a: ({ children, openInNewTab, href, rel, ...rest }) => {
if (href.match(/^https?:\/\/|^\/\//i)) {
return (
<a
href={href}
target={openInNewTab ? '_blank' : '_self'}
rel={rel || 'noopener noreferrer'}
{...rest}
>
{children}
</a>
);
}
return (
<Link href={href}>
<a {...rest}>{children}</a>
</Link>
);
},
}}
/>
);
};

Take it for a spin, and let us know how it goes. We're keen to gather your feedback, or even better, contributions on improving it for everyone.


It's Easy To Get Started

GraphCMS plans are flexibly suited to accommodate your growth. Get started for free, or reach out to our sales team to discuss larger projects with more complex needs