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>`
```
typeof Heading
```
link
Customize links. Defaults to a React Router `<Link>` component in Hydrogen and a `<a>` in Hydrogen React.
```
typeof RichTextLink
```
list
Customize lists. They can be either ordered or unordered. Defaults to `<ol>` or `<ul>`
```
typeof List
```
listItem
Customize list items. Defaults to `<li>`.
```
typeof ListItem
```
paragraph
Customize paragraphs. Defaults to `<p>`
```
typeof Paragraph
```
root
The root node of the rich text. Defaults to `<div>`
```
typeof Root
```
text
Customize how text nodes. They can either be bold or italic. Defaults to `<em>`, `<strong>` or text.
```
typeof Text
```

Examples

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

export function MainRichText({metaFieldData}) {

return (

<RichText

data={metaFieldData}

components={{

paragraph({node}) {

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

}}

);

}

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

Was this page helpful?