BaseHub is a headless CMS that helps you write, store and distribute content for the Internet, faster. In our docs, we aim to give you an overview of BaseHub’s core concepts, as well as guide you through common use cases of the platform.

How to use Rich Text in React?

The Delivery API can return your Rich Text Blocks’ data in multiple formats:

Plain Text, will ignore all formatting, media, and custom components, easy to render.
HTML, will ignore custom components, easy to render.
Markdown, will ignore custom components, needs a markdown to HTML parser to render.
JSON, comes with everything, but needs something that understand and processes it.

In the case of the JSON format, the response will be an AST based on the TipTap editor spec. Because of the complexities associated with processing this JSON format, we’ve built a React Component called <RichText /> that will help us render our Rich Text content. This is how it works:

import { Pump } from "basehub/react-pump"
import { RichText } from "basehub/react-rich-text"

const Page = async () => {
  return (
    <Pump
      draft={draftMode().isEnabled}
      next={{ revalidate: 60 }}
      queries={[
        {
          homepage: {
            subtitle: { // [!code highlight]
              json: { // [!code highlight]
                content: true, // [!code highlight]
              }, // [!code highlight]
            }, // [!code highlight]
          },
        },
      ]}
    >
      {async ([{ homepage }]) => {
        "use server"
        return <RichText>{homepage.subtitle.json.content}</RichText>
      }}
    </Pump>
  )
}

export default Page

When using the <RichText /> component, you can simply pass the JSON content into it via children, and it’ll get rendered.

How to use Fast Refresh with Pump?

Pump is a React Server Component that enables a Fast Refresh-like experience for your content. When set up, Pump will subscribe to real time changes from your Repo, and so keep your UI up-to-date. This is ideal for previewing content before pushing it to production. You can use it like this:

import { Pump } from "basehub/react-pump" // [!code highlight]
import { draftMode } from "next/headers"

const Page = () => {
  return (
    <Pump queries={[{ _sys: { id: true } }]} draft={draftMode().isEnabled}> // [!code highlight]
      {async ([data]) => {
        "use server" // needs to be a Server Action // [!code highlight]

        // some notes
        // 1. `data` is typesafe.
        // 2. if draft === true, this will run every time you edit the content, in real time.
        // 3. you can render nested Server Components (Client or Server) here, go nuts.

        return (
          <pre>
            <code>{JSON.stringify(data, null, 2)}</code>
          </pre>
        )
      }}
    </Pump>
  )
}

export default Page

Note: This is a fragment of the BaseHub documentation. For more info, please go to our official docs.