https://github.com/storybynumbers/rich-text-to-react
Maps a Contentful rich text field to a React component tree.
https://github.com/storybynumbers/rich-text-to-react
contentful react
Last synced: about 1 year ago
JSON representation
Maps a Contentful rich text field to a React component tree.
- Host: GitHub
- URL: https://github.com/storybynumbers/rich-text-to-react
- Owner: storybynumbers
- Created: 2018-12-14T10:53:45.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T20:36:36.000Z (over 3 years ago)
- Last Synced: 2025-04-02T02:17:47.986Z (about 1 year ago)
- Topics: contentful, react
- Language: JavaScript
- Size: 1.53 MB
- Stars: 20
- Watchers: 2
- Forks: 2
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# rich-text-to-react
> Render a Contentful rich text field with React components.
Warning: this is in alpha state, and this is not an official Contentful module. It is largely based off their [rich-text-html-renderer](https://github.com/contentful/rich-text#readme) library. Its purpose is to map node of a [Rich Text field from Contentful](https://www.contentful.com/developers/docs/concepts/rich-text/) to customizable React components.
[](https://www.npmjs.com/package/rich-text-to-react) [](https://standardjs.com)
## Install
```bash
npm install --save rich-text-to-react
```
## Usage
```javascript
import RichTextToReact from 'rich-text-to-react';
import SampleRichFieldData from './data'
export default () => (
)
```
## Custom renderers
You can also pass custom renderers for both marks and nodes:
```javascript
import RichTextToReact from 'rich-text-to-react';
import { INLINES, BLOCKS, MARKS } from '@contentful/rich-text-types';
import MyCustomComponent from '~/components/MyCustomComponent'
const renderingOptions = {
renderMark: {
// Render all bold text in red.
[MARKS.BOLD]: (text, key) => {text}
},
renderNode: {
// Pass the node data for the inline embed to MyCustomComponent.
[INLINES.EMBEDDED_ENTRY]: (node, key, next, options) => ,
[BLOCKS.EMBEDDED_ENTRY]: (node, key, next, options) => ,
[BLOCKS.HEADING_1]: (node, key, next) => {next(node.content, key, next)},
},
foo: 'bar',
}
export default () => (
)
```
The object passed to RichTextToReact's `options` prop should have two keys, `renderMark` and `renderNode`, each containing objects. Those objects
should be keyed with Rich Text types (see next section) to assign rendering functions with a type of a Rich Text node (heading, list item, link).
Rendering functions are passed the following arguments:
- `node` - Section of the Rich Text document being processed
- `key` - Unique key used internally by React
- `next` - Utility function to iterate through the Rich Text document
- `options` - Any additional properties (everything except renderMark and renderNode) will be passed here. In the example above, MyInlineComponent will receive the prop 'foo' with value 'bar'.
## Rich Text types
The `renderNode` keys should be one of the following `BLOCKS` and `INLINES` properties as defined in [`@contentful/rich-text-types`](https://www.npmjs.com/package/@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`](https://www.npmjs.com/package/@contentful/rich-text-types):
- `BOLD`
- `ITALIC`
- `UNDERLINE`
- `CODE`
## License
MIT © [storybynumbers](https://github.com/storybynumbers)