Skip to main content

RichText
component

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

Was this section helpful?

Example code

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

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