prismic-reactjs-custom

This is an opinionated fork of prismic-reactjs that allows you to use custom React components instead of standard HTML tags

import { RichText, RichTextRenderer, Link, Date } from 'prismic-reactjs-custom'

Usage

Use the RichText React component

import { RichText } from 'prismic-reactjs-custom'
 
// `richText` is the only required prop
// all other props are optional
;<RichText
  richText={richTextDataFromPrismic}
  heading1={yourCustomHeading1}
  paragraph={yourCustomParagraph}
/>

Props

richText: The only required prop. Must be a JSON.parsed version of a Prismic Rich Text array. See an example here

Each of these props should be a React component that renders a specific tag.

• heading1
• heading2
• heading3
• heading4
• heading5
• heading6
• paragraph
• preformatted
• strong
• em
• listItem
• oListItem
• list
• oList
• image
• embed
• hyperlink
• label
• span

Alternative Usage

Import the renderer and create your own React component

import { RichTextRenderer } from 'prismic-reactjs-custom'
 
export const RichText = ({ text }) =>
  RichTextRenderer.render(text, {
    heading1: CustomH1, // your own component
    heading2: CustomH2,
    heading3: CustomH3,
    heading4: CustomH4,
    heading5: CustomH5,
    heading6: CustomH6,
    paragraph: CustomParagraph,
    preformatted: CustomPreformatted,
    strong: CustomStrong,
    em: CustomEm,
    listItem: CustomListItem,
    oListItem: CustomOListItem,
    list: CustomList,
    oList: CustomOList,
    image: CustomImage,
    embed: CustomEmbed,
    hyperlink: CustomHyperlink,
    label: CustomLabel,
    span: CustomSpan,
  })

Find out more about Prismic's "Structured text" here.

---

Link

Get a URL from a Link fragment of any kind

import { Link } from 'prismic-reactjs-custom'
 
// link resolver not required if sure that it's not a document link
Link.url(mydoc.data.mylink, ctx.linkResolver)

Date

Convert a Date as string from the API to an ISO Date:

import { Date } from 'prismic-reactjs-custom'
 
Date(mydoc.data.mydate)

Example using styled-components

import { RichText } from 'prismic-reactjs-custom'
import styled from 'styled-components'
 
const Heading1 = styled.h1`
  font-size: 3rem;
  color: pink;
`
 
const Paragraph = styled.p`
  font-size: 1rem;
  color: blue;
`
 
<RichText
  richText={richTextDataFromPrismic}
  heading1={Heading1}
  paragraph={Paragraph}
/>