notion-block-renderer

v2.0.x ~: isNextJS of main props was removed.

v2.3.x ~: Added new block type table_of_contents.

This package is suitable for use with Reactjs or Nextjs. Notion blocks are rendered into React components. That component has a CSS class name corresponding to the block type.

I'm a programmer (@takumafujimoto). I first created this feature for myself. Later, I thought it would be useful for everyone, so I made it public.

Notion API verion

This package compatible to the 2022-02-22 and 2022-06-28 version of Notion API.

Notion API version: https://developers.notion.com/reference/changes-by-version

Install

npm install notion-block-renderer

or

yarn add notion-block-renderer

Demo & Example

• Styled one-page exmale

Usage

1import NotionBlocks from "notion-block-renderer";
2
3const Sample = ({ blocks }) => {
4    return (
5        <div>
6            <NotionBlocks
7                blocks={blocks}
8            />
9        </div>
10    );
11}
12

You have to pass blocks.

blocks is result of a response object as follows:

1const { results: blocks }  = await notion.blocks.children.list({ block_id: id });

For more detail, see the Notion docs.

https://developers.notion.com/reference/get-block-children

Available Blocks

Block Type
paragraph
heading_1
heading_2
heading_3
bulleted_list_item
numbered_list_item
quote
callout
code
image
video
table_of_contents

Code Block Usage

By default, code blocks are unstyled. The option isCodeHighlighter can be used to easily set the style.

This package defaults to react-syntax-highlighter when isCodeHighlighter is true. Use.

1const Sample = ({ blocks }) => {
2    return (
3        <div>
4            <NotionBlocks
5                blocks={blocks}
6                isCodeHighlighter={true}
7            />
8        </div>
9    );
10}

You can also set custom style CSS for the syntaxHighlighterCSS option.

You can choose to provide

• your own CSS or
• use react-syntax-highlighter's style.

react-syntax-highlighter style usage

Only Highlight.js of react-syntax-highlighter(not Prism.js) is supported at this time. So please use to import from "react-syntax-highlighter/dist/cjs/styles/hljs". See: https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/

First you need to install react-syntax-highlighter.

https://www.npmjs.com/package/react-syntax-highlighter

Then import styles to use.

1import {
2  monokaiSublime,
3  irBlack,
4  tomorrowNightBright,
5  monokai,
6} from "react-syntax-highlighter/dist/cjs/styles/hljs";
7
8const Sample = ({ blocks }) => {
9    return (
10        <div>
11            <NotionBlocks
12                blocks={blocks}
13                isCodeHighlighter={true}
14                syntaxHighlighterCSS={monokaiSublime}
15            />
16        </div>
17    );
18}

your own CSS style usage

syntaxHighlighterCSS has the following type.

1{
2    [key: string]: React.CSSProperties;
3}

Code block samples

Unstyled:

Styled:

CSS example

https://github.com/takux/notion-block-renderer/tree/main/example/styles/tailwindcss-sample.css

Props

The NotionBlocks component has several props.

Prop name	Description	Default value	Example values
blocks	Notion api blocks. See Notion docs.	(None)	---
prefix	Add prefix to className of each html component.	"nbr"	---
blockPrefix	Add prefix to className of each block html component.	"block"	---
blocksPrefix	Add prefix to className of blocks html component.	"blocks"	---
isCodeHighlighter	Code block's style. If true, code blocks are styled by CSS.	false	true
syntaxHighlighterCSS	If isCodeHighlighter is true, you can change style to your own CSS. Using react-syntax-highlighter's styled CSS is easy way.	tomorrowNightBright	monokaiSublime

type

The props type for blocks is as follows. This is just a reference code. See currect type: types.ts.

1type BlocksProps = {
2  blocks: BlockType[];
3  prefix?: string;
4  blockPrefix?: string;
5  blocksPrefix?: string;
6  isCodeHighlighter?: boolean;
7  syntaxHighlighterCSS?: {
8    [key: string]: React.CSSProperties;
9  };
10};

The BlockType is our original declarative type. The best way may refer to @notionhq/client's type. Replacing code would be taking time. So please contribute if you can.

About me

• Twitter

• My Homepage

• MY Blog