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

import NotionBlocks from "notion-block-renderer";

const Sample = ({ blocks }) => {
    return (
        <div>
            <NotionBlocks
                blocks={blocks}
            />
        </div>
    );
}

You have to pass blocks.

blocks is result of a response object as follows:

const { 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.

const Sample = ({ blocks }) => {
    return (
        <div>
            <NotionBlocks
                blocks={blocks}
                isCodeHighlighter={true}
            />
        </div>
    );
}

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.

import {
  monokaiSublime,
  irBlack,
  tomorrowNightBright,
  monokai,
} from "react-syntax-highlighter/dist/cjs/styles/hljs";

const Sample = ({ blocks }) => {
    return (
        <div>
            <NotionBlocks
                blocks={blocks}
                isCodeHighlighter={true}
                syntaxHighlighterCSS={monokaiSublime}
            />
        </div>
    );
}

your own CSS style usage

syntaxHighlighterCSS has the following type.

{
    [key: string]: React.CSSProperties;
}

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.

type BlocksProps = {
  blocks: BlockType[];
  prefix?: string;
  blockPrefix?: string;
  blocksPrefix?: string;
  isCodeHighlighter?: boolean;
  syntaxHighlighterCSS?: {
    [key: string]: React.CSSProperties;
  };
};

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