Rich
The component renders a metafield of type . By default the rendered output uses semantic HTML tags. Customize how nodes are rendered with the components prop.
Anchor to propsProps
- Anchor to datadatastringrequired
The JSON string that correspond to the Storefront API's RichText format.
- ComponentGeneric
An HTML tag or React Component to be rendered as the base element wrapper. The default is
div.- Anchor to componentscomponents
Customize how rich text components are rendered
- Anchor to plainplainboolean
Remove rich text formatting and render plain text
RichTextPropsForDocs
- as
An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`.
ComponentGeneric - components
Customize how rich text components are rendered
CustomComponents - 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).
string - plain
Remove rich text formatting and render plain text
boolean
RichTextPropsBase<AsType>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
{
/** The root node of the rich text. Defaults to `<div>` */
root?: typeof Root;
/** Customize the headings. Each heading has a `level` property from 1-6. Defaults to `<h1>` to `<h6>` */
heading?: typeof Heading;
/** Customize paragraphs. Defaults to `<p>` */
paragraph?: typeof Paragraph;
/** Customize how text nodes. They can either be bold or italic. Defaults to `<em>`, `<strong>` or text. */
text?: typeof Text;
/** Customize links. Defaults to a React Router `<Link>` component in Hydrogen and a `<a>` in Hydrogen React. */
link?: typeof RichTextLink;
/** Customize lists. They can be either ordered or unordered. Defaults to `<ol>` or `<ul>` */
list?: typeof List;
/** Customize list items. Defaults to `<li>`. */
listItem?: typeof ListItem;
}Example code
examples
Example code
description
I am the default example
JavaScript
import {RichText} from '@shopify/hydrogen-react'; export function MainRichText({metaFieldData}) { return ( <RichText data={metaFieldData} components={{ paragraph({node}) { return <p className="customClass">{node.children}</p>; }, }} /> ); }TypeScript
import {RichText} from '@shopify/hydrogen-react'; export function MainRichText({metaFieldData}: {metaFieldData: string}) { return ( <RichText data={metaFieldData} components={{ paragraph({node}) { return <p className="customClass">{node.children}</p>; }, }} /> ); }