Miss any of our Open RFC calls?Watch the recordings here! »

prismic-reactjs-custom

0.4.0 • Public • Published

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 }) =>
  CustomRichText.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}
/>

Keywords

none

Install

npm i prismic-reactjs-custom

DownloadsWeekly Downloads

28

Version

0.4.0

License

MIT

Unpacked Size

26.7 kB

Total Files

21

Last publish

Collaborators

  • avatar