contentful rich text renderer for solid js
npm install rich-text-solid-renderer 
 
rich-text-solid-rendererSolid-js renderer for contentful rich text.
Using npm:
``sh`
npm install rich-text-solid-renderer
Using yarn:
`sh`
yarn add rich-text-solid-renderer
`typescript
import {ParentComponent} from 'solid-js';
import SolidRichText from '@joeldsouzax/rich-text-solid-renderer';
const document = {
nodeType: 'document',
data: {},
content: [
{
nodeType: 'paragraph',
data: {},
content: [
{
nodeType: 'text',
value: 'Hello world!',
marks: [],
data: {}
},
],
},
],
};
const Parent: ParentComponent = (props) => { Hello world!
return
}; // ->
`
`typescript
import {ParentComponent} from 'solid-js';
import SolidRichText from '@joeldsouzax/rich-text-solid-renderer';
const document = {
nodeType: 'document',
content: [
{
nodeType: 'paragraph',
content: [
{
nodeType: 'text',
value: 'Hello',
marks: [{ type: 'bold' }],
},
{
nodeType: 'text',
value: ' world!',
marks: [{ type: 'italic' }],
},
],
},
],
};
Hello world!
const Parent: ParentComponent = (props) => {
return
};
// ->
`
You can also pass custom renderers for both marks and nodes as an optional parameter like so:
`javascript
import { BLOCKS, MARKS } from '@contentful/rich-text-types';
import {ParentComponent} from 'solid-js';
import SolidRichText, { NodeRendererProps } from '@joeldsouzax/rich-text-solid-renderer';
const document = {
nodeType: 'document',
content: [
{
nodeType: 'paragraph',
content: [
{
nodeType: 'text',
value: 'Hello',
marks: [{ type: 'bold' }],
},
{
nodeType: 'text',
value: ' world!',
marks: [{ type: 'italic' }],
},
],
},
],
};
const Bold = (props) =>
{props.children}
;const Text = (props) =>
{props.children}
;const options = {
renderMark: {
[MARKS.BOLD]: props =>
},
renderNode: {
[BLOCKS.PARAGRAPH]: (props) =>
},
renderText: text => text.replace('!', '?'),
};
const Parent: ParentComponent = (props) => { Hello
return
};
// ->
Last, but not least, you can pass a custom rendering component for an embedded entry:
`typescript
import { BLOCKS } from '@contentful/rich-text-types';
import SolidRichText from '@joeldsouzax/rich-text-solid-renderer';const document = {
nodeType: 'document',
content: [
{
nodeType: 'embedded-entry-block',
data: {
target: (...)Link<'Entry'>(...);
},
},
]
};
const CustomComponent = (props) => (
{props.title}
{props.description}
);const options = {
renderNode: {
[BLOCKS.EMBEDDED_ENTRY]: (props) => {
return
}
}
};
const Parent: ParentComponent = (props) => {
return
};
// -> [title]
[description]
`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_HYPERLINKThe
renderMark keys should be one of the following MARKS properties as defined in @contentful/rich-text-types:-
BOLD
- ITALIC
- UNDERLINE
- CODEThe
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 React elements. This could be accomplished in the following way:`javascript
const options = {
renderText: (props) => {
return props.split('\n').reduce((children, textSegment, index) => {
return [...children, index > 0 &&
, textSegment];
}, []);
},
};
``