Product updates

Introducing the Hygraph React Rich Text Renderer

Render Hygraph documents using Rich Text in your application easily

Written by João

on May 25, 2021

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.

rich-text-react-renderer: React Rich Text Renderer;
rich-text-types: TypeScript definitions for the Hygraph Rich Text field type.

#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>
          );
        },
      }}
    />
  );
};