Templating fields

On this page, you'll learn how to template content from the Prismic API in your Gatsby application.


🕙 Before Reading

This article assumes that you have queried your API and saved the document object in a variable named document.

If this isn't the case, learn how to Retrieve the response here.

Simple content fields

Content from Prismic comes in more than a dozen types. Most of these are simple primitive values, including:

  • Boolean
  • Color
  • Key Text
  • Number
  • Select

These are represented as either a string, a number, or a boolean. Templating them is really simple. If you've already learned how to Retrieve fields from a query, the work is almost done. After that, you can inject them directly into your application:

Copy
<span>{{ document.example_number }}</span>
// <span>74.5</span>

Structured content fields

For some of these fields, we provide dedicated separated articles. Please refer to them to read the full reference. These are:

The remaining structured content types are:

  • Date
  • Timestamp
  • Geopoint
  • Embed
  • Group

Date and Timestamp

The raw response of these fields provides the following formats:

  • Date: YYYY-MM-DD
  • Timestamp: YYYY-MM-DDTHH:MM:SS+0000

Convert to a String

Using the prismic-react Date method, we can create a more usable Date or Timestamp object. (Click on the tabs to see the examples of each of the two fields). So first, covert the field to a string:

  • Date
  • Timestamp
Copy
import { Date } from 'prismic-reactjs'

const dateString = Date(document.example_date).toString()
// Date outputs as "2020-12-12" 
Copy
import { Date } from 'prismic-reactjs'

const dateString = Date(document.example_timestamp).toString()
// Timestamp outputs as "2020-12-12T06:00:00+0000"

Format the Date or Timestamp field

Now, pass your Date or Timestamp object into a formatting function. You can either build your own or use a library such as date-fns-tz.

Here's an example of how to convert the Date or Timestamp object to a formatted string using date-fns-tz:

  • Date
  • Timestamp
Copy
import { Date } from 'prismic-reactjs'
import { format } from 'date-fns-tz'

const date = Date(document.example_date)
const formattedDate = format(date,'MMMM dd, yyyy');
// Outputs as "December 12, 2020"
Copy
import { Date } from 'prismic-reactjs'
import { format } from 'date-fns-tz'

const timestamp = Date(document.example_timestamp)
const formattedTimestamp = format(timestamp,'MMMM dd, yyyy H:mm a');
// Outputs as "December 12, 2020 12:00 PM"

If you require only some simple date formatting, you may use the built-in DateTimeFormat method instead:

  • Date
  • Timestamp
Copy
import { Date } from 'prismic-reactjs'

const date = Date(document.example_date)
const formattedDate = Intl.DateTimeFormat('en-US',{
  year: 'numeric',
  month: 'short',
  day: '2-digit' }).format(date)
// Outputs as "Dec 12, 2020"
Copy
import { Date } from 'prismic-reactjs'

const timestamp = Date(document.example_timestamp)

var formattedTimestamp = Intl.DateTimeFormat('en-US',{
  year: 'numeric',
  month: 'short',
  day: '2-digit',
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
}).format(timestamp)
// Outputs as "Mar 24, 2020, 12:00:00 AM"

Geopoint

The GeoPoint field is used for geolocation coordinates. It works by adding coordinates or pasting a Google Maps URL, and it's served as an object with two properties: latitude and longitude. This is the structure of a geopoint:

Copy
"example_geopoint": {
  "latitude": 48.85392410000001,
  "longitude": 2.2913515000000073
},

You can access these properties directly:

Copy
const lat = document.example_geopoint.latitude   
// 48.85392410000001
const long = document.example_geopoint.longitude 
// 2.2913515000000073

Embed

This is the structure of an embed field:

Copy
"example_embed": {
  "version": "1.0",
  "url": "https://prismic.io",
  "type": "link",
  "title": "Make your website editable for the whole team - Prismic",
  "provider_name": null,
  "thumbnail_url": "https://images.prismic.io/prismic-website/6e49007fec52f99861047cdd55b3ab190ea04295_dev-landing-page-image.png?auto=compress,format",
  "html": "<div data-type=\"unknown\"><a href=\"https://prismic.io\"><h1>Make your website editable for the whole team - Prismic</h1><img src=\"https://images.prismic.io/prismic-website/6e49007fec52f99861047cdd55b3ab190ea04295_dev-landing-page-image.png?auto=compress,format\"><p>Choose your technology. Use the API to fetch content. Empower your content team.</p></a></div>",
  "embed_url": "https://prismic.io/"
},

You can template an embed field using the html or url from the response:

Copy
<div dangerouslySetInnerHTML={{ __html: document.example_embed.html }} />

Group

A Group field renders an array of content groups:

Copy
"example_group": [
  {
    "example_boolean_in_group": true,
    "example_number_in_group": 3,
    "example_key_text_in_group": "dog"
  },
  {
    "example_boolean_in_group": false,
    "example_number_in_group": 7,
    "example_key_text_in_group": "cat"
  },
],

To template a Group, you can use a map function map():

Copy
<ul>
  {document.example_group.map((post, i) => (
    <li key={`post-${i}`}>
      {post.example_key_text}
      {post.example_number}
    </li>
  ))}
</ul>

💡 Further Learning: Content Types You can learn more about all of these content types in our Content Modeling documentation.