@webiny/react-rich-text-renderer NPM

@webiny/react-rich-text-renderer

A React component to render data coming from Webiny Headless CMS and Webiny Form Builder.

About

Webiny uses https://editorjs.io/ as a go to Rich Text Editor, with some additional plugins. To speed up the rendering of data for developers, we created this component with default renderers for block types that are used in Webiny by default.

Install

npm install --save @webiny/react-rich-text-renderer

Or if you prefer yarn:

yarn add @webiny/react-rich-text-renderer

Usage

Fetch your data from Headless CMS, then pass it to the component like this:

import { RichTextRenderer } from "@webiny/react-rich-text-renderer";

// Load content from Headless CMS (here we show what your content might look like).
const content = [
  {
    type: "paragraph",
    data: {
      text: "A well written paragraph of text can bring so much joy!",
      textAlign: "left",
      className: ""
    }
  }
];

// Mount the component
<RichTextRenderer data={content} />;

Adding custom renderers

You can override the default renderers or add new renderers for your custom block types like this:

import { RichTextRenderer, RichTextBlockRenderer } from "@webiny/react-rich-text-renderer";

const customRenderers: Record<string, RichTextBlockRenderer> = {
  // Override the default renderer for "delimiter" block
  delimiter: block => {
    return <div data-type={block.type} className={"my-custom-delimiter"} />;
  },
  // Add a renderer for "youtube" block
  youtube: block => {
    return (
      <iframe
        width="560"
        height="315"
        src={block.data.url}
        title={block.data.title}
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
      ></iframe>
    );
  }
};

const content = [
  // This block will use the default renderer
  {
    type: "paragraph",
    data: {
      text: "A well written paragraph of text can bring so much joy!",
      textAlign: "left",
      className: ""
    }
  },
  // This block will use the custom "delimiter" renderer
  {
    type: "delimiter"
  },
  // This block will use the new "youtube" renderer
  {
    type: "youtube",
    data: {
      url: "https://www.youtube.com/embed/gOGJKHXntiU",
      title: "Webiny Overview"
    }
  }
];

// Mount the component
<RichTextRenderer data={content} renderers={customRenderers} />;

@babel/runtime @editorjs/editorjs @types/react classnames react sanitize-html

@infinitebrahmanuniverse/nolb-_webi @everything-registry/sub-chunk-1008

15 days ago

15 days ago

15 days ago

21 days ago

28 days ago

28 days ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

0.0.0-unstable.de38392959

4 months ago

5.38.5-beta.0

4 months ago

0.0.0-unstable.a9593f74dd

4 months ago

5.38.5

4 months ago

5.38.4

4 months ago

5.38.4-beta.0

4 months ago

0.0.0-unstable.2696f9d9e8

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

9 months ago

9 months ago

6 months ago

7 months ago

9 months ago

9 months ago

7 months ago

7 months ago

7 months ago

0.0.0-unstable.c7dec08bb0

10 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

0.0.0-unstable.acacc54f0e

10 months ago

5.38.1-beta.0

6 months ago

0.0.0-unstable.99666aeb00

10 months ago

6 months ago

6 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

7 months ago

8 months ago

7 months ago

8 months ago

8 months ago

8 months ago

10 months ago

10 months ago

10 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

9 months ago

9 months ago

0.0.0-unstable.8feaff8c32

10 months ago

0.0.0-unstable.98511f29f1

10 months ago

0.0.0-unstable.085ff6572f

11 months ago

10 months ago

8 months ago

6 months ago

6 months ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-unstable.9e825fd5fb

1 year ago

5.25.0-beta.1

2 years ago

5.25.0-beta.0

2 years ago

5.30.0

2 years ago

0.0.0-unstable.3386f66516

1 year ago

5.31.0-beta.0

2 years ago

5.31.0-beta.1

2 years ago

0.0.0-unstable.60a863e033

1 year ago

0.0.0-unstable.df6d94b531

1 year ago

5.33.4-beta.0

1 year ago

0.0.0-unstable.40876133bb

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

0.0.0-unstable.97a151f74d

1 year ago

5.31.0

2 years ago

0.0.0-unstable.8acc9e8892

1 year ago

0.0.0-unstable.b02d94bba0

1 year ago

5.28.0-beta.0

2 years ago

0.0.0-unstable.ad3a7a4920

1 year ago

0.0.0-unstable.615a930a68

1 year ago

0.0.0-unstable.c2780f51fe

1 year ago

5.33.5-beta.0

1 year ago

0.0.0-unstable.aa00eecd97

12 months ago

5.36.2-beta.1

11 months ago

5.36.2-beta.2

11 months ago

5.33.1-beta.0

2 years ago

0.0.0-unstable.d7f521b032

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-unstable.1145e7667f

1 year ago

5.32.0

2 years ago

5.33.5

1 year ago

5.36.2-beta.0

11 months ago

0.0.0-unstable.d65ec29d44

1 year ago

0.0.0-unstable.aad28a72ae

1 year ago

12 months ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

0.0.0-ee-vpcs.549378cf03

1 year ago

1 year ago

2 years ago

1 year ago

2 years ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-unstable.79032b23a5

1 year ago

0.0.0-unstable.fcdad0bc61

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-unstable.ecd8734205

1 year ago

5.34.8

1 year ago

5.34.6-beta.2

1 year ago

5.34.6-beta.1

1 year ago

0.0.0-unstable.d4f203fa97

1 year ago

5.34.6

1 year ago

0.0.0-unstable.1e66d121db

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

2 years ago

12 months ago

0.0.0-unstable.bca7b3e350

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-unstable.b6408e0dea

1 year ago

5.34.1-beta.3

1 year ago

5.34.1-beta.2

1 year ago

0.0.0-unstable.d13302545b

12 months ago

5.35.3

12 months ago

5.35.4

11 months ago

0.0.0-unstable.da99e0b846

1 year ago

0.0.0-unstable.d16f688daf

1 year ago

0.0.0-unstable.13771d80a8

1 year ago

5.33.0-beta.1

2 years ago

5.33.0-beta.0

2 years ago

0.0.0-unstable.60e968001a

1 year ago

5.35.1

12 months ago

5.35.2

12 months ago

5.35.0

1 year ago

0.0.0-unstable.990c3ab1b6

1 year ago

0.0.0-unstable.606fc9c866

1 year ago

0.0.0-unstable.5e7233243f

2 years ago

5.32.0-beta.0

2 years ago

5.36.2

11 months ago

0.0.0-unstable.e3f4727c56

1 year ago

0.0.0-unstable.611c5af35e

1 year ago

0.0.0-unstable.496cf268ac

1 year ago

5.30.0-beta.0

2 years ago

0.0.0-unstable.78f581c1d2

1 year ago

2 years ago

11 months ago

12 months ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-unstable.2af142b57e

1 year ago

0.0.0-unstable.b14eaecf38

1 year ago

5.37.0-beta.0

11 months ago

5.25.0

2 years ago

5.27.0-beta.0

2 years ago

0.0.0-unstable.6e5425ee89

1 year ago

5.36.1-beta.0

12 months ago

5.36.1-beta.1

12 months ago

0.0.0-unstable.6509387258

1 year ago

0.0.0-unstable.cc58a6566b

1 year ago

0.0.0-unstable.c59b9cc5b9

12 months ago

0.0.0-unstable.7f63ea0744

1 year ago

5.34.5-beta.0

1 year ago

5.34.5-beta.1

1 year ago

5.34.7-beta.2

1 year ago

0.0.0-unstable.8c4d9f045a

2 years ago

1 year ago

1 year ago

12 months ago

1 year ago

2 years ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago