Handle Rich Text in React

On this page, you’ll learn how to work with Rich Text from Prismic in React.


To get started, open your terminal and run the following command to launch a blank React project configured with Prismic:

Copy
npx degit prismicio-community/react-starter-prismic-minimal react-starter-prismic-minimal
cd react-starter-prismic-minimal
npx @slicemachine/init

Once that's set up, run the project with this command:

Copy
npm run dev

You now have your app running on a development server, accessible at http://localhost:3000/

You also have Slice Machine, Prismic’s local development tool, running at http://localhost:9999/

With our example project running, we’re ready to work with Rich Text.

Write and Edit Rich Text

Rich Text fields work like many other text inputs with formatting capabilities, including bolding, italicizing, and linking functionality.

To edit Rich Text, open the Prismic dashboard (prismic.io/dashboard) and click on your new repository.

Open the “Hello World” document. Inside there’s one Slice, called “Text”. Edit the content just like you would in any text editor. You can apply formatting, add images, and embed videos.

For more info, read Edit Rich Text.

Model Rich Text

You can customize the Rich Text field that appears in the Prismic Editor.

Go to http://localhost:9999/slices/Text/default in your browser. This is the Slice that renders your Rich Text field. On this screen, you can add other fields to your Text Slice. For now, we’re going to focus on the Rich Text field. Click the pencil icon to edit the Rich Text field.

A screenshot of Slice Machine's Rich Text configuration screen.

On this screen, you can customize the Rich Text field options.

To learn more about the Rich Text configuration options, read Configure Rich Text.

Render Rich Text

In your new React application, open slices/Text/index.js. This is the React component for your Text Slices. Your text is rendered by the <PrismicRichText> component.

You can provide your own components to override <PrismicRichText>'s default rendering. The following code will render paragraph elements as blockquotes rather than ps:

Copy
import { PrismicRichText } from "@prismicio/react"

<PrismicRichText
  field={slice.primary.text}
  components={{
    paragraph: ({ children }) => <blockquote>{children}</blockquote>,
  }}
/>

Learn more about providing your own components.

Learn more about how to render Rich Text in Template Content in React.

Query Rich Text

To access the Rich Text of a Document, fetch the Document from the API. You can see a Prismic API query in src/Page.jsx:

Copy
const [page, { state }] = usePrismicDocumentByUID("page", uid);

This line fetches a document based on its unique identifier — or uid.

You can search API results by Rich Text using three predicates:

  • fulltext to search for documents that contain a given string
  • has to search for documents where a Rich Text field is populated with content
  • missing to search for documents where a Rich Text field is not populated with content

Note: has and missing don't work with fields in Slices or Groups.

Here’s a fulltext query:

Copy
const [page, { state }] = usePrismicDocumentByUID('page', uid, {
  predicates: [predicate.fulltext('document', 'Hello')],
})

To learn more about querying, read Fetch Data in React.


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.