Nuclear Powered Marshmallows

    prismic-reactjs-custom
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • 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 }) =>
      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}
    />

    Keywords

    none

    Install

    npm i prismic-reactjs-custom

    DownloadsWeekly Downloads

    21

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    40.6 kB

    Total Files

    28

    Last publish

    Collaborators

    • mrmartineau