@contentful/rich-text-react-renderer
TypeScript icon, indicating that this package has built-in type declarations

15.19.6 • Public • Published

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

import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  data: {},
  content: [
    {
      nodeType: 'paragraph',
      data: {},
      content: [
        {
          nodeType: 'text',
          value: 'Hello world!',
          marks: [],
          data: {},
        },
      ],
    },
  ],
};

documentToReactComponents(document); // -> <p>Hello world!</p>
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }],
        },
      ],
    },
  ],
};

documentToReactComponents(document);
// -> <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:

import { BLOCKS, MARKS } from '@contentful/rich-text-types';
import { documentToReactComponents } from '@contentful/rich-text-react-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 = ({ children }) => <p className="bold">{children}</p>;

const Text = ({ children }) => <p className="align-center">{children}</p>;

const options = {
  renderMark: {
    [MARKS.BOLD]: (text) => <Bold>{text}</Bold>,
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
  },
  renderText: (text) => text.replace('!', '?'),
};

documentToReactComponents(document, options);
// -> <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:

import { BLOCKS } from '@contentful/rich-text-types';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'embedded-entry-block',
      data: {
        target: (...)Link<'Entry'>(...);
      },
    },
  ]
};

const CustomComponent = ({ title, description }) => (
  <div>
    <h2>{title}</h2>
    <p>{description}</p>
  </div>
);

const options = {
  renderNode: {
    [BLOCKS.EMBEDDED_ENTRY]: (node) => {
      const { title, description } = node.data.target.fields;
      return <CustomComponent title={title} description={description} />
    }
  }
};

documentToReactComponents(document, options);
// -> <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
    • EMBEDDED_RESOURCE
  • INLINES

    • EMBEDDED_ENTRY (this is different from the BLOCKS.EMBEDDED_ENTRY)
    • EMBEDDED_RESOURCE
    • HYPERLINK
    • ENTRY_HYPERLINK
    • ASSET_HYPERLINK
    • RESOURCE_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 = {
  renderText: (text) => {
    return text.split('\n').reduce((children, textSegment, index) => {
      return [...children, index > 0 && <br key={index} />, textSegment];
    }, []);
  },
};

Note on adding a key prop in custom renderers:

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: {
    [MARKS.BOLD]: (text) => {
      return <b key={`${text}-key`}>{text}</b>;
    },
  },
};

Preserving Whitespace

The options object can include a preserveWhitespace boolean flag. When set to true, this flag ensures that multiple spaces in the rich text content are preserved by replacing them with &nbsp;, and line breaks are maintained with <br /> tags. This is useful for content that relies on specific formatting using spaces and line breaks.

import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello     world!',
          marks: [],
        },
      ],
    },
  ],
};

const options = {
  preserveWhitespace: true,
};

documentToReactComponents(document, options);
// -> <p>Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world!</p>

In this example, the multiple spaces between "Hello" and "world!" are preserved in the rendered output.

Readme

Keywords

none

Package Sidebar

Install

npm i @contentful/rich-text-react-renderer

Weekly Downloads

419,072

Version

15.19.6

License

MIT

Unpacked Size

141 kB

Total Files

77

Last publish

Collaborators

  • eozelius
  • fisher-contentful
  • jonathanstoye
  • trburgess
  • 2wce
  • tnugmanov-contentful
  • primeinteger
  • david-shibley-contentful
  • jjolton_contentful
  • nealdavies
  • dkim-cf
  • t-col
  • chasepoirier
  • ryunsong-contentful
  • elylucas
  • fidanism
  • jsdalton
  • lewiscowper
  • rafafelix0
  • felixboenke
  • lillianbitner
  • mateojgordo
  • brettjackson
  • brnrossi
  • julija.a
  • doetter
  • jose.medrano
  • jonathan-contentful
  • georgechios.contentful
  • inbal.gordon
  • anwar.ahmad
  • ghepting
  • camposcontentful
  • benjaminrobertlees
  • whitelisab
  • mgoudy_contentful
  • marcopieatcontentful
  • jbcontentful
  • floriank
  • pkeavenycontentful
  • msieroslawska
  • miguelcrespo
  • chrishelgert
  • cdun.ctfl
  • asleepysamurai
  • budimir.budimir.cf
  • seth-carter-contentful
  • bhekanik
  • konstantinminster
  • invalid_json
  • douglasnsovenhi
  • dropecostareis
  • lorenzonibrunno
  • baskiers
  • dancontentful
  • ivo-contentful
  • thy.pham
  • adrian-contentful
  • alvinometric
  • dimitrycf
  • cormac.debarra
  • jites
  • nhanlon-cf
  • cbentham-cf
  • cempesket
  • jfctfl
  • nkoyo.ating
  • evgeniip
  • max.cheremisin
  • sofia_margariti
  • dineshswamy_paranthaman
  • dmytro.filippov
  • arjun-londhey
  • eric-miller2129
  • liamstokingercontentful
  • aodhagan-cf
  • vikaskumr
  • dennise917
  • alicankargin
  • cf-aleks
  • bvkr
  • ebctfl
  • sjouli
  • mayakarabula
  • cf-engit
  • harshil1712
  • paradoja
  • mattvanvoorst-contentful
  • holgerstorm
  • cf-remylenoir
  • mayagillilan
  • ahsen
  • mar.contentful
  • rowadz_contentful
  • kiyutink_contentful
  • roosterhack
  • kurtulus-contentful
  • omasopust-cf
  • cemre.yuksel
  • peacemukke
  • sophiiistika
  • stephanleece
  • dogukano
  • 3b3ziz
  • or_yoffe_contentful
  • hennadii.shymanskyi
  • m.bensalem
  • sxagoraris
  • stathis.xagoraris
  • andreascful
  • richard_moran
  • yvesrijckaert_contentful
  • mehdi_contentful
  • georgpanok
  • riqwan.thahamir
  • piotr.ciazynski
  • farruco.sanjurjo
  • ronaldronson
  • silhoue
  • phbschmidt
  • kathrinholzmann
  • poberherr
  • mikita.savanovich
  • laurenceb
  • elblivion
  • fabianheymann
  • it-internal
  • sbezludny
  • medturki
  • danwe
  • yann-cf
  • makinwa37
  • diacono
  • whydah-gally
  • tauraz
  • cakejelly
  • martin3walker
  • argvk_cf
  • yiotis
  • leonardofreitass
  • hwartig
  • davidfateh
  • dvasylenko
  • ruderngespra
  • mshaaban0
  • kdamball
  • marcolink
  • gosiaszporer
  • z0al
  • mspagnolo
  • thomas.spiesser
  • anho
  • didi96
  • fs
  • cgrabo
  • dana_grn
  • andipaetzold-cf
  • denkristoffer
  • luizfonseca
  • juliabiro
  • vinz93
  • jbourne
  • 0mathcrap
  • damienxy
  • roryscarson
  • m99coder-cf
  • loweisz
  • thomas.contentful
  • marceltoben
  • massao
  • bohdan.hutsol
  • contentful-ecosystem
  • vida.momenzadeh
  • yuri.mazursky
  • rebecca.koenig
  • annmary