Napoleonic Panda Machine

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

    2.3.7 • 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 (@takuxone). 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

    Install

    npm i notion-block-renderer

    DownloadsWeekly Downloads

    100

    Version

    2.3.7

    License

    MIT

    Unpacked Size

    39.6 kB

    Total Files

    34

    Last publish

    Collaborators

    • takuxone