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 {Link, RichText, Date} from 'prismic-reactjs';

4. Add a doc state

Next we will add a state to your component for the document you are querying.

Copy
state = {
  doc: null,
}

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.

You can read more about this on our Link Resolving page.

You will need to modify the link resolver to fit your needs.

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 '/';
}

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 query the document in the componentWillMount life cycle method as shown below.

Without an access token

If your API is public, then you don't need an access token for the API.

Copy
componentWillMount() {
  const apiEndpoint = 'https://your-repo-name.prismic.io/api/v2';
  
  Prismic.api(apiEndpoint).then(api => {
    api.query(Prismic.Predicates.at('document.type', 'page')).then(response => {
      if (response) {
        this.setState({ doc: response.results[0] });
      }
    });
  });
}

With an access token

If you are using a private repository, then you’ll need to include your access token like this.

Copy
componentWillMount() {
  const apiEndpoint = 'https://your-repo-name.prismic.io/api/v2';
  const accessToken = 'your-access-token';

  Prismic.api(apiEndpoint, {accessToken}).then(api => {
    api.query(Prismic.Predicates.at('document.type', 'page')).then(response => {
      if (response) {
        this.setState({ doc: response.results[0] });
      }
    });
  });
}

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.

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 display a "Loading" message until the document content is queried.

Copy
render() {
  if (this.state.doc) {
    const document = this.state.doc.data;
    return (
      <div>
        <h1>{RichText.asText(document.title)}</h1>
        <img alt="cover" src={document.image.url} />
        {RichText.render(document.description, this.linkResolver)}
      </div>
    );
  }
  return <h1>Loading...</h1>;
}

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