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.

PackagesAnchor

Currently, there are two packages available.

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

Getting startedAnchor

You can get it on npm or Yarn.

# npm
npm i @graphcms/rich-text-react-renderer

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

UsageAnchor

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 elementsAnchor

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.

TypeScriptAnchor

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.jsAnchor

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.