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 datadatadatastringstringrequiredrequired
The JSON string that correspond to the Storefront API's RichText format.
- Anchor to asasasComponentGenericComponentGeneric
An HTML tag or React Component to be rendered as the base element wrapper. The default is
div.- Anchor to componentscomponentscomponentsCustomComponentsCustomComponents
Customize how rich text components are rendered
- Anchor to plainplainplainbooleanboolean
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