Choose a version:

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.

Anchor to propsProps

Anchor to data data string required: The JSON string that correspond to the Storefront API's RichText format.
Anchor to as as ComponentGeneric: An HTML tag or React Component to be rendered as the base element wrapper. The default is div.
Anchor to components components: Customize how rich text components are rendered
Anchor to plain plain boolean: 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>`
```
({ node, }: { node: { type: "heading"; level: number; children?: ReactNode[]; }; }) => ReactNode
```

link

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

({ node, }: { node: { type: "link"; url: string; title?: string; target?: string; children?: ReactNode[]; }; }) => ReactNode

list

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

({ node, }: { node: { type: "list"; listType: "unordered" | "ordered"; children?: ReactNode[]; }; }) => ReactNode

listItem

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

({ node, }: { node: { type: "list-item"; children?: ReactNode[]; }; }) => ReactNode

paragraph

Customize paragraphs. Defaults to `<p>`

({ node, }: { node: { type: "paragraph"; children?: ReactNode[]; }; }) => ReactNode

root

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

({ node, }: { node: { type: "root"; children?: ReactNode[]; }; }) => ReactNode

text

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

({ node, }: { node: { type: "text"; italic?: boolean; bold?: boolean; value?: string; }; }) => ReactNode

Examples

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

export function MainRichText({metaFieldData}) {

return (

<RichText

data={metaFieldData}

components={{

paragraph({node}) {

return <p className="customClass">{node.children}</p>;

},

}}

/>

);

}

Examples

Example code

JavaScript

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

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

TypeScript

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

Was this page helpful?