prismic-reactjs-custom
This is an opinionated fork of prismic-reactjs that allows you to use custom React components instead of standard HTML tags
Usage
Use the RichText
React component
import RichText from 'prismic-reactjs-custom' // `richText` is the only required prop// all other props are optional;<RichText = = =/>
Props
richText
: The only required prop. Must be a JSON.parse
d 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
const RichText = RichTextRenderer
Find out more about Prismic's "Structured text" here.
Link
Get a URL from a Link fragment of any kind
// link resolver not required if sure that it's not a document linkLink
Date
Convert a Date as string from the API to an ISO Date:
Datemydocdatamydate
Example using styled-components
import RichText from 'prismic-reactjs-custom'import styled from 'styled-components' const Heading1 = styledh1` font-size: 3rem; color: pink;` const Paragraph = styledp` font-size: 1rem; color: blue;` <RichText = = =/>