Rendering the Rich Text / Title Field

The Rich Text field (formerly called Structured Text) is a configurable text field with formatting options. This field provides content writers with a WYSIWYG editor where they can define the text as a header or paragraph, make it bold, add links, etc.The Title field is a specific Rich Text field used for titles.

Before Reading

This page assumes that you have already imported the prismic-reactjs library as shown below.

import {Link, RichText, Date} from 'prismic-reactjs';

This page also assumes that you have retrieved your content and stored it in a state variable named document.

It is also assumed that you have imported a Link Resolver with the variable name linkResolver. To learn more about this, check out the Link Resolving page. 

Output as HTML

The basic usage of the Rich Text / Title field is to use the RichText.render method to transform the field into HTML code.

The following is an example that would output the HTML for 2 Rich Text fields. In this case the Rich Text fields have the API IDs of title and body_content.

Copy
render() {
  if (this.state.document) {
    const document = this.state.document;
    return (
      <div className="content">
        {RichText.render(document.data.title, linkResolver)}
        {RichText.render(document.data.body_content, linkResolver)}
      </div>
    );
  } else {
    return null;
  }
}

In the previous example when calling the RichText.render method, you need to pass in a Link Resolver function. This is necessary to provide the correct url for any Link to a Document that exists in your Rich Text content.

Note that you do not need to provide a Link Resolver. If you don't provide a Link Resolver, though, any Link to a Document in the Rich Text content won't work properly.

To learn more about how to set up a Link Resolver, check out our Link Resolving page.


Customizing the HTML output

You can customize the HTML output by passing an HTML serializer to the RichText.render method. You can learn more about this on the HTML Serializer page.


Output as plain text

The RichText.asText method will convert and output the text in the Rich Text / Title field as a string.

Here is an example that outputs the Rich Text content as plain text. In this case, the Rich Text field has an API ID of author.

Copy
<h3 className="author">
  {RichText.asText(document.data.author)}
</h3>


Output as a Component

If you're using version 1.0 or higher of the prismic-reactjs package, you can output your Rich Text content as a React component. It works similarly to RichText.render in that it will render the field as HTML code, but will be easier to integrate with your React application. You can still use the render() method if you prefer to, but we recommend this improved approach.

The following is an example code that will output 2 different Rich Text fields as HTML. These fields have the API IDs of title and body_content.

Copy
return (
  <div className='content'>
    <RichText render={document.data.title} linkResolver={linkResolver} />
    <RichText render={document.data.body_content} linkResolver={linkResolver} />
  </div>
)

As in the Output as HTML example, you only have to pass the Link Resolver function if you expect the Rich Text field to contain any Link to a Document. In that case, the linkResolver will be used to provide the correct url to your internal documents.


Wrapping your Rich Text with a different React component

By default, the <RichText /> component will render your HTML content with a <React.Fragment> component. If you need a different component, such as <header> or <title> for example, you can pass the desired component as a string to the optional Component property to specify which component you want to wrap around your Rich Text.

For this example, we will render the title Rich Text field with a <title> component wrapped around it.

Copy
return (
  <RichText render={document.data.title} Component="title" />
)

For your React applications, you might want to use specific components to provide navigation, like <Link> from react-router-dom which significantly improves the navigation experience by avoiding a full reload of your site when navigating to another internal page. If you want to handle any Link to a Document that may be present within the Rich Text field being rendered, not just as a hyperlink, but as a particular component, we provide the optional property serializeHyperlink.

To use it, you need to pass a function that defines how to create the custom Link component, depending on your needs. The following example shows how to use the serializeHyperlink property with a function defined for a React <Link> component.

Copy
import { Link } from 'react-router-dom'

const customLink = (type, element, content, children, index) => {
  <Link key={element.data.id} to={linkResolver(element.data)}>
    <a>{content}</a>
  </Link>
)

const BodyText = (document) => (
  <div>
    <RichText
      render={document.data.body_content}
      serializeHyperlink={customLink}
    />
  </div>
)

The resulting rendered Rich Text will now use <Link> for any Link to a Document instead of <a href>