@movement-react/prismic

Prismic is a headless CMS system that allows you to easily create websites. React is one of the most popular JavaScript Frameworks. This library aims to help accelerate development with React and Prismic.

See the prismic docs for further details on their API's.

Table of Contents

1. Installation
2. Getting Started
3. Components
   • PrismicProvider
4. React Hooks
   • Get multiple documents
   • Get a single document

Installation

npm install @movement-react/prismic prismic-javascript

or

yarn add @movement-react/prismic prismic-javascript

optionally you can install prismic-reactjs to render their CMS components.

Getting Started

Below is a quick start to getting setup with the prismic react library.

Requirements

1. You will need access to https://prismic.io
2. Create a new site see the prismic docs for further details
3. Retrieve your access token from the prismic admin dashboard

Setting Up Your Provider

Within your main component, import and wrap your jsx with the PrismicProvider component.

import { PrismicProvider } from '@movement-react/prismic';

const App = () => {
  const url = `https://${process.env.PRISMIC_DOMAIN}.prismic.io/api/v2`;
  const accessToken = process.env.PRISMIC_ACCESS_TOKEN;
  
  return (
    <PrismicProvider url={url} accessToken={accessToken}>
      <App />
    </PrismicProvider>
  );
}

From here you can use the React Hooks to query your prismic site.

Components

1. PrismicProvider

PrismicProvider

A context provider for access the prismic client api. This allows you to query prismic from anywhere within your react application.

PrismicProvider Props

| Name | DataType | Mandatory | | :----------- | :-----------: | :-----------: | | url | string | | | accessToken | string | |

import { PrismicProvider } from '@movement-react/prismic';

const App = () => {
  const url = `https://${process.env.PRISMIC_DOMAIN}.prismic.io/api/v2`;
  const accessToken = process.env.PRISMIC_ACCESS_TOKEN;
  
  return (
    <PrismicProvider url={url} accessToken={accessToken}>
      <App />
    </PrismicProvider>
  );
}

Hooks

1. usePrismicFetchByID()
2. usePrismicQuery()

usePrismicFetchByID

A react hook that fetches a prismic document by the type and UID or ID.

See the Prismic API for further details

usePrismicFetchByID Props

| Name | DataType | Mandatory | | :----------- | :-----------: | :-----------: | | type | string | | | id | string | | | options | QueryOptions |

import { usePrismicFetchByID, PrismicProvider } from '@movement-react/prismic';

const Component = () => {
  const { data, loading } = usePrismicFetchByID('page', 'my-page', { lang: 'en-us' });
  console.log(data) // outputs document with uid 'my-page'
  return (
    <div>{data.id}</div>
  );
}

const App = () => {
  const url = `https://${process.env.PRISMIC_DOMAIN}.prismic.io/api/v2`;
  const accessToken = process.env.PRISMIC_ACCESS_TOKEN;
  
  return (
    <PrismicProvider url={url} accessToken={accessToken}>
      <Component />
    </PrismicProvider>
  );
}

usePrismicQuery

A react hook that fetches documents from the prismic api using predicates.

See the Prismic Predicate API for further details on predicates

usePrismicQuery Props

| Name | DataType | Mandatory | | :----------- | :-----------: | :-----------: | | predicates | string or string[] | * | | options | QueryOptions |

import { usePrismicQuery, PrismicProvider } from '@movement-react/prismic';
import Prismic from 'prismic-javascript';

const Component = () => {
  const { data, loading } = usePrismicQuery([
    Prismic.Predicate.at('document.type', 'page')
  ]);
  console.log(data) // outputs an array of documents
  return (
    <div>{
      data.map((result, i) => (
        <div key={i}>{result.id}</di>
      ))}
    </div>
  );
}

const App = () => {
  const url = `https://${process.env.PRISMIC_DOMAIN}.prismic.io/api/v2`;
  const accessToken = process.env.PRISMIC_ACCESS_TOKEN;
  
  return (
    <PrismicProvider url={url} accessToken={accessToken}>
      <Component />
    </PrismicProvider>
  );
}