Easily restore your project to a previous version with our new Instant One-click Backup Recovery

Introducing the Hygraph React Rich Text Renderer

Render Hygraph documents using Rich Text in your application easily
João Pedro Schmitz

Written by João

May 25, 2021
GraphCMS Rich Text Renderer

We've often come across community members working with the Rich Text field in Hygraph 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 Hygraph 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 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
content={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.

Blog Author

João Pedro Schmitz

João Pedro Schmitz

Front-End Engineer

Front-End Engineer in love with React. Learning every day.

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.