Skip to main content

Rich text

Source@dopt/react-rich-text

Overview

The React rich text component is powered by a rich text field and is great for rendering complex content containing spacing, alignment, images, links, and more.

It matches rich text types you might find in traditional content management systems and can be helpful for adding custom in-product content.

You can use the component out of the box from @dopt/react-rich-text to render rich text fields within React.

Installation

info

If you are using a particular React framework like Next.js, please check out our framework specific docs.

npm install @dopt/react-rich-text

Usage

The default export from @dopt/react-rich-text is a component that you can use to render the contents of Dopt's rich text field.

import type { RichText } from '@dopt/core-rich-text';
import RichText from '@dopt/react-rich-text';

function MyContent() {
const block = useBlock('my-flow.rich-content-block');

return <RichText>{block.field<RichText>('rich-body')}</RichText>;
}

Props

RichText

Extends HTMLDivElement.

NameTypeDescription
children?RichTextThe rich text content for the component
noStyles?booleanDetermines if styles are rendered alongside rich text elements

Styling API

Learn more about styling and theming →

NameSelectorDescription
root.dopt-rich-textRoot element
node.dopt-rich-text__nodeAll nodes produced by rich text
text.dopt-rich-text__textText element
bold.dopt-rich-text__boldBolded text
italic.dopt-rich-text__italicItalicized text
underline.dopt-rich-text__underlineUnderlined text
bulletedList.dopt-rich-text__bulleted-listBulleted list
numberedList.dopt-rich-text__numbered-listNumbered list
listItem.dopt-rich-text__list-itemIndividual item
h1.dopt-rich-text__heading-oneHeading level 1
h2.dopt-rich-text__heading-twoHeading level 2
h3.dopt-rich-text__heading-threeHeading level 3
link.dopt-rich-text__linkLink
image.dopt-rich-text__imageImage
video.dopt-rich-text__videoVideo embed rendered within a video or iframe
info

If a video source is an embed URL from YouTube, Vimeo, Wistia, or Loom, it will be rendered in an iframe instead of a video.

Alignment

NameSelectorDescription
left.dopt-rich-text__node--align-leftLeft alignment
center.dopt-rich-text__node--align-centerCenter alignment
right.dopt-rich-text__node--align-rightRight alignment
justify.dopt-rich-text__node--align-justifyJustified alignment

Types

RichText

Rich text fields are made up of an array of elements each of which may have further properties including children.

@dopt/core-rich-text contains type and schema definitions for Dopt's rich text field.

Read the complete type definitions →