Integrating Prismic with an existing React project

If you already have a React project that you want to integrate with Prismic, then you can simply add the Prismic javascript library as a dependency to your project. Let’s walk through all the steps to get Prismic integrated into your project!

1. Create a content repository

A content repository is where you define, edit and publish content.

Create a new repository

Next you’ll need to model your content, create your custom types, and publish some documents to your repository. To learn more, check out our documentation for Creating Custom Types.

Now, let’s take a look at how to connect this new content with your project.

2. Add the Prismic development kits as dependencies

Now let’s add the Prismic development kits as a dependencies to your project. Launch the terminal (command prompt or similar on Windows), point it to your project location and run the following command.

Copy
npm install prismic-javascript prismic-reactjs --save

3. Import the kits in your component

To use the Prismic javascript libraries, you’ll need to import them into your component.

Copy
import Prismic from 'prismic-javascript'
import { Date, Link, RichText } from 'prismic-reactjs'

4. Connect to the API

Next you will create a Client function which will serve as the connection to your Prismic repository. You will need to specify your repository and access token information if it's set to private.

Copy
const apiEndpoint = 'https://your-repo-name.cdn.prismic.io/api/v2'
const accessToken = '' // This is where you would add your access token for a Private repository

const Client = Prismic.client(apiEndpoint, { accessToken })

6. Get the API and query your content

Now we can query your Prismic repository and put the retrieved content in the state as the doc variable. We will use React Hooks to achieve this thanks to the Client function you initialized earlier.

Copy
const [doc, setDocData] = React.useState(null)

React.useEffect(() => {
  const fetchData = async () => {
    const response = await Client.query(
      Prismic.Predicates.at('document.type', 'page')
    )
    if (response) {
      setDocData(response.results[0])
    }
  }
  fetchData()
}, [])

To learn more about querying the API, check out the How to Query the API page.

Pagination of API Results

When querying a Prismic repository, your results will be paginated. By default, there are 20 documents per page in the results. You can read more about how to manipulate the pagination in the Pagination for Results page.

Next we will define a link resolver which will determine what a page's url will look like. This will be used when we eventually render our content, specially for links to internal documents you may include as part of your Rich Text fields. You can read more about this on our Link Resolving page.

You will need to modify the link resolver to fit your needs, but here is a simple example:

Copy
// Link Resolver
linkResolver(doc) {
  // Define the url depending on the document type
  if (doc.type === 'page') {
    return '/page/' + doc.uid;
  } else if (doc.type === 'blog_post') {
    return '/blog/' + doc.uid;
  }

  // Default to homepage
  return '/';
}

7. Render the queried content

Once you've retrieved your content and updated the component's state, you can render the content using the helper functions in the prismic-react development kit.

Here's a simple example that will check if the document was queried correctly and then render some example content from the document.

Copy
return (
  <React.Fragment>
    {
      doc ? (
        <div>
          <h1>{RichText.asText(doc.data.title)}</h1>
          <img alt='cover' src={doc.data.image.url} />
          <RichText render={doc.data.description} linkResolver={linkResolver} />
        </div>
      ) : <div>No content</div>
    }
  </React.Fragment>
)

You can read more about rendering your content in the Rendering section of the documentation.

8. Take advantage of previews and edit buttons

In order to take full advantage of Prismic's features, check out the the in-website preview and edit-button pages. There you will find the steps needed to add these features to your own React app.

And your Prismic journey begins!

You should have all the tools now to really dig into your project. We invite you to further explore the docs to learn how to define your Custom Types, query the API, and render your content.

This page shows you the basics of using Prismic with a React application, but there are ways to clean up the code and organize your files for your Prismic integration. We suggest taking a look at our React Starter Project to get a feel for some of the best practices when integrating with Prismic. You can also review some of our sample projects, such as Building a Blog or Creating a Multi-page Site.