RichText

The `RichText` component renders a metafield of type `rich_text_field`. By default the rendered output uses semantic HTML tags. Customize how nodes are rendered with the `components` prop.

import {RichText} from '@shopify/hydrogen';

export function MainRichText({metaFieldData}) {
  return (
    <RichText
      data={metaFieldData}
      components={{
        paragraph({node}) {
          return <p className="customClass">{node.children}</p>;
        },
      }}
    />
  );
}

import {RichText} from '@shopify/hydrogen';

export function MainRichText({metaFieldData}: {metaFieldData: string}) {
  return (
    <RichText
      data={metaFieldData}
      components={{
        paragraph({node}) {
          return <p className="customClass">{node.children}</p>;
        },
      }}
    />
  );
}

Props

RichTextPropsForDocs

as

An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`.

components

Customize how rich text components are rendered

data

The JSON string that correspond to the Storefront API's [RichText format](https://shopify.dev/docs/apps/custom-data/metafields/types#rich-text-formatting).

plain

Remove rich text formatting and render plain text

CustomComponents

heading

Customize the headings. Each heading has a `level` property from 1-6. Defaults to `<h1>` to `<h6>`

link

Customize links. Defaults to a React Router `<Link>` component in Hydrogen and a `<a>` in Hydrogen React.

list

Customize lists. They can be either ordered or unordered. Defaults to `<ol>` or `<ul>`

listItem

Customize list items. Defaults to `<li>`.

paragraph

Customize paragraphs. Defaults to `<p>`

root

The root node of the rich text. Defaults to `<div>`

text

Customize how text nodes. They can either be bold or italic. Defaults to `<em>`, `<strong>` or text.