prismic-react-tools

prismic-react-tools

Install

yarn add prismic-react-tools

Usage

Tools that you can use from this set:

• Components:

• PlainText
• RichText
• Slice
• Slices

• HOC:

• withPrismicPreview

Just pass your components and a serializer (optional) to the provider, then you may use the components refered above:

import React, { Component } from 'react'
import { PrismicReactToolsProvider } from 'prismic-react-tools'

// your components to be rendered as slices
import * as components from './components'

// your serializer for prismic data
import { serializer } from './lib'

class Layout extends Component {
  render () {
    return (
      <PrismicReactToolsProvider
        components={components}
        serializer={serializer}
      >
       {/* ... */}
      </PrismicReactToolsProvider>
    )
  }
}

Components

• PlainText

//...
// use it with strings
<PlainText
  content="Your name is {{ name }}, and you're {% adjective %}"
  variables={{ adjective: 'cool', name: 'John Ganzas' }}
/>

// use it with single rich text from prismic (asText)
// be aware that you can pass variables here too
<PlainText content={content} />

//...

• RichText

//...
// use it with strings
<RichText
  content={content}
  variables={{ myVar: 'Some variable' }}
/>

//...

• Slice

//...
// just create your slice in prismic with the
// match name of you component
// example: in Prismic, call your slice `Item List` (Prismic will turn in `item_list`)
// and you just need to be sure you have the component `ItemList`
<Slice {...sliceObjectFromPrismic} />

// then in your component just access to all the data in the props ;)
//...

• Slices

//...
// just pass the array with slices and
// this will just map that array and render
// slice by slice
<Slices slices={slicesFromPrismic} />
//...

HOC

• withPrismicPreview

Simple simple, this will just create a preview page for you with the same strategy that is used in gatsby-source-prismic-with-magic

import * as pageComponents from '../layouts';
import { withPrismicPreview } from 'prismic-react-tools';
import prismicOptions from '../../prismic-config';

export default withPrismicPreview({ pageComponents, ...prismicOptions });

important note here is to setup the options exactly as in gatsby-source-prismic-with-magic, that way, will be ensuring the preview will be fed by the same data as the static pages

options:

module.exports = {
  accessToken,                    // Prismic access token
  langs,                          // language object ex: { 'en-us': { default: true, path: 'en }, 'pt-pt': { path: 'pt' } }
  layoutsKey = 'page_-_',         // layouts key that match your pages in Prismic
  layoutNameExceptions = {},      // exceptions (view more about this in `gatsby-source-prismic-with-magic`)
  layoutsPath = 'src/layouts',    // layouts path for your page components (used by `gatsby-source-prismic-with-magic`)
  onCreatePage,                   // function that runs on create each page (view `gatsby-source-prismic-with-magic` docs)
  onCreatePages,                  // function that runs on create all pages (view `gatsby-source-prismic-with-magic` docs)
  repositoryName                  // Prismic repository name
}

Nice to know

This set of tools can be really usefull with my Gatsby Prismic fetch plugin

License

MIT © psoaresbj