Skip to content
Maps a Contentful rich text field to a React component tree.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Initial commit Dec 14, 2018
src
.babelrc init create-react-library@2.6.7 Dec 14, 2018
.editorconfig init create-react-library@2.6.7 Dec 14, 2018
.eslintrc
.gitignore Initial commit Dec 14, 2018
.travis.yml init create-react-library@2.6.7 Dec 14, 2018
README.md
package.json
rollup.config.js init create-react-library@2.6.7 Dec 14, 2018
yarn.lock

README.md

rich-text-to-react

Map a Contentful rich text field to React component tree.

Warning: this is in alpha state, and this is not an official Contentful module. It is largely based off their rich-text-html-renderer library. The purpose is to map a Rich Text field from Contentful to React components.

NPM JavaScript Style Guide

Install

npm install --save rich-text-to-react

Usage

import RichTextToReact from 'rich-text-to-react';
import SampleRichFieldData from './data'

export default () => (
  <RichTextToReact document={SampleRichFieldData.json} />
)

Custom renderers

You can also pass custom renderers for both marks and nodes:

import RichTextToReact from 'rich-text-to-react';
import { INLINES, BLOCKS, MARKS } from '@contentful/rich-text-types';
import MyCustomComponent from '~/components/MyCustomComponent'

const options = {
  renderMark: {
    // Render all bold text in red.
    [MARKS.BOLD]: (text, key) => <strong key={key} style={{ color: 'red' }}>{text}</strong>
  },
  renderNode: {
    // Pass the node data for the inline embed to MyCustomComponent.
    [INLINES.EMBEDDED_ENTRY]: (node, key) => <MyCustomComponent key={`RichText-${key}`} node={node> />
  }
}

export default () => (
  <RichTextToReact document={myFieldValue.json} options={options} />
)

Rich Text types

The renderNode keys should be one of the following BLOCKS and INLINES properties as defined in @contentful/rich-text-types:

  • BLOCKS

    • DOCUMENT
    • PARAGRAPH
    • HEADING_1
    • HEADING_2
    • HEADING_3
    • HEADING_4
    • HEADING_5
    • HEADING_6
    • UL_LIST
    • OL_LIST
    • LIST_ITEM
    • QUOTE
    • HR
    • EMBEDDED_ENTRY
    • EMBEDDED_ASSET
  • INLINES

    • EMBEDDED_ENTRY (this is different from the BLOCKS.EMBEDDED_ENTRY)
    • HYPERLINK
    • ENTRY_HYPERLINK
    • ASSET_HYPERLINK

The renderMark keys should be one of the following MARKS properties as defined in @contentful/rich-text-types:

  • BOLD
  • ITALIC
  • UNDERLINE
  • CODE

License

MIT © storybynumbers

You can’t perform that action at this time.