Package Exports

notion-block-renderer
notion-block-renderer/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (notion-block-renderer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

notion-block-renderer

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

This package is suitable for use with Reactjs or Nextjs.

Notion API verion

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

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

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 response = await notion.blocks.children.list({ block_id: id });

For more detail, see the Notion docs.

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

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

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

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;
  };
};