rich-text-react-renderer
React renderer for the Contentful rich text field type.
Installation
Using npm:
npm install @contentful/rich-text-react-renderer
Using yarn:
yarn add @contentful/rich-text-react-renderer
Usage
; const document = nodeType: 'document' data: {} content: nodeType: 'paragraph' data: {} content: nodeType: 'text' value: 'Hello world!' marks: data: {} ; ; // -> <p>Hello world!</p>
; const document = nodeType: 'document' content: nodeType: 'paragraph' content: nodeType: 'text' value: 'Hello' marks: type: 'bold' nodeType: 'text' value: ' world!' marks: type: 'italic' ; ;// -> <p><b>Hello</b><u> world!</u></p>
You can also pass custom renderers for both marks and nodes as an optional parameter like so:
;; const document = nodeType: 'document' content: nodeType: 'paragraph' content: nodeType: 'text' value: 'Hello' marks: type: 'bold' nodeType: 'text' value: ' world!' marks: type: 'italic' ; const Bold = <p className="bold">children</p>; const Text = <p className="align-center">children</p>; const options = renderMark: MARKSBOLD: <Bold>text</Bold> renderNode: BLOCKSPARAGRAPH: <Text>children</Text> text; ;// -> <p class="align-center"><p class="bold">Hello</p><u> world?</u></p>
Last, but not least, you can pass a custom rendering component for an embedded entry:
;; const document = nodeType: 'document' content: nodeType: 'embedded-entry-block' data: target: ...Link<'Entry'>...; ; const CustomComponent = <div> <h2>title</h2> <p>description</p> </div>; const options = renderNode: BLOCKSEMBEDDED_ENTRY: { const title description = nodedatatargetfields; return <CustomComponent title=title description=description /> } ; ;// -> <div><h2>[title]</h2><p>[description]</p></div>
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 theBLOCKS.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
The renderText
callback is a function that has a single string argument and returns a React node. Each text node is evaluated individually by this callback. A possible use case for this is to replace instances of \n
produced by Shift + Enter
with <br/>
React elements. This could be accomplished in the following way:
const options = { return text; };
key
prop in custom renderers:
Note on adding a It is possible to pass a key
prop in the components returned by custom renderers. A good use case for this is in embeded entries using the node's target.sys.id
. It is important not to pass anything that is index-like (e.g. 1 or "1") as it may clash with the default renderers which automatically inject a key
prop using their index in the Contentful rich text AST.
To work around this limitation, just append any non-numeric character to your custom key.
const options = renderMark: MARKSBOLD: { return <b key=`-key`>text</b>; } ;