notion-block-renderer
TypeScript icon, indicating that this package has built-in type declarations

2.3.13 • Public • Published

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


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


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: codeblock-unstyled

Styled: codeblock-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

Package Sidebar

Install

npm i notion-block-renderer

Weekly Downloads

243

Version

2.3.13

License

MIT

Unpacked Size

40.4 kB

Total Files

34

Last publish

Collaborators

  • takuxone