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
If you are using a particular React framework like Next.js, please check out our framework specific docs.
- npm
- Yarn
- pnpm
npm install @dopt/react-rich-text
yarn add @dopt/react-rich-text
pnpm add @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 { Children as 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.
| Name | Type | Description |
|---|---|---|
| children? | RichText | The rich text content for the component |
| noStyles? | boolean | Determines if styles are rendered alongside rich text elements |
Styling API
Learn more about styling and theming →
| Name | Selector | Description |
|---|---|---|
| root | .dopt-rich-text | Root element |
| node | .dopt-rich-text__node | All nodes produced by rich text |
| text | .dopt-rich-text__text | Text element |
| bold | .dopt-rich-text__bold | Bolded text |
| italic | .dopt-rich-text__italic | Italicized text |
| underline | .dopt-rich-text__underline | Underlined text |
| bulletedList | .dopt-rich-text__bulleted-list | Bulleted list |
| numberedList | .dopt-rich-text__numbered-list | Numbered list |
| listItem | .dopt-rich-text__list-item | Individual item |
| h1 | .dopt-rich-text__heading-one | Heading level 1 |
| h2 | .dopt-rich-text__heading-two | Heading level 2 |
| h3 | .dopt-rich-text__heading-three | Heading level 3 |
| link | .dopt-rich-text__link | Link |
| image | .dopt-rich-text__image | Image |
| video | .dopt-rich-text__video | Video embed rendered within a video or iframe |
Alignment
| Name | Selector | Description |
|---|---|---|
| left | .dopt-rich-text__node--align-left | Left alignment |
| center | .dopt-rich-text__node--align-center | Center alignment |
| right | .dopt-rich-text__node--align-right | Right alignment |
| justify | .dopt-rich-text__node--align-justify | Justified alignment |
Videos
If a video source is an embed URL from YouTube, Vimeo, Wistia, or Loom, it will be rendered in an iframe element instead of a video element.
Embed URLs must match the following formats for the embedded video to display properly via rich text.
| Vendor | Embed URL format |
|---|---|
| YouTube | https://www.youtube.com/embed/abcdef |
| Vimeo | https://player.vimeo.com/video/abcdef |
| Wistia | https://fast.wistia.net/embed/iframe/abcdef |
| Loom | https://www.loom.com/embed/abcdef |
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.