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>