This is an opinionated fork of prismic-reactjs that allows you to use custom React components instead of standard HTML tags
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'
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}
/>
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
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.
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)
Convert a Date as string from the API to an ISO Date:
import { Date } from 'prismic-reactjs-custom'
Date(mydoc.data.mydate)
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}
/>