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