@ueno/prismic-kit

Helpful tools for building Prismic apps in React

Table of Contents

• Installation
• Usage

• Local Development
• License

Installation

npm install @ueno/prismic-kit

{
  "peerDependencies": {
    "express": "5.x",
    "prismic-javascript": "1.x",
    "prop-types": "^15.6.0",
    "react": "^16.4.0"
  }
}

Usage

Configuration

import PrismicKit from '@ueno/prismic-kit';
import linkResolver from './utils/prismic-link-resolver';

PrismicKit.config({
  repoName: 'ueno-llc',
  accessToken: process.env.PRISMIC_ACCESS_TOKEN,
  linkResolver,
});

Fetching on the client

import React, { Component } from 'react';
import { withJob } from 'react-jobs';
import queryPrismic from '@ueno/prismic-kit/query';

@withJob({
  work: queryPrismic(api => api.getSingle('home_page')),
})
export default class App extends Component {
  render() {
    const page = this.props.jobResult;

    return (
      <h1>{page.data.title}</h1>
    );
  }
}

@withJob({
  work: queryPrismic((api, props) => api.getByUID('article', props.uid)),
})

import { observable } from 'mobx';
import Prismic from 'prismic';
import queryPrismic from '@ueno/prismic-kit/query';

export default class PrismicStore {
  @observable articles = []

  fetchArticles = queryPrismic(api => api.query([
    Prismic.Predicates.at('document.type', 'article'),
  ]))

  constructor() {
    this.fetchArticles().then(articles => {
      this.articles.replace(articles);
    });
  }
}

Rendering slice zones

• primary (Object): the non-repeatable fields of a slice. Each property will be a field.
• items (Array of Objects): the repeatable fields of a slice. Each item will be an object with the repeatable fields.
• slice_type (String): the kind of slice. You usually won't need to reference this.
• index (Number): the index of the slice within the list.

// slices/text.js
import React from 'react';
import { RichText } from 'prismic-reactjs';

const Text = ({ primary }) => (
  <div>
    {RichText.render(primary.text)}
  </div>
);

import React, { Component } from 'react';
import SliceRenderer from '@ueno/prismic-kit/slice-renderer';
import TitleSlice from './slices/title';
import Text from './slices/text';
import ImageSlice from './slices/image';

export default ({ page }) => (
  <div>
    <h1>{page.data.title}</h1>
    <div>
      <SliceRenderer
        slices={page.data.body}
        components={{
          title: TitleSlice,
          body: BodySlice,
          image: ImageSlice,
        }}
      />
    </div>
  </div>
);

Enabling previews and webhooks

// server.js
import express from 'express';
import prismicMiddleware from '@ueno/prismic-kit/middleware';
import cache from './redis-cache';
import linkResolver from './prismic-link-resolver';

const app = express();

app.use('/api/prismic', prismicMiddleware({
  webhookCallback: () => {
    return cache.clear();
  },
  webhookSecret: process.env.PRISMIC_WEBHOOK_SECRET,
}));

import React, { Component } from 'react';
import PrismicPreviewLoader from '@ueno/prismic-kit/preview-loader';

export default class App extends Component {
  render() {
    return (
      <PrismicPreviewLoader>
        {/* ... */}
      </PrismicPreviewLoader>
    );
  }
}

Local Development

git clone https://github.com/ueno-llc/prismic-kit
cd prismic-kit
npm install
npm test

License