Render Notion blocks with Chakra UI components

Installation

npm install notion-blocks-chakra-ui

or

yarn add notion-blocks-chakra-ui

How to use

import {NotionBlockRender, NotionBlockChakraRenderProvider} from '@grbtec/notion-block-chakra-render';

// Get blocks from a Notion API
// for more info: https://developers.notion.com/docs/getting-started
const blocks = getBlocks();

<NotionBlockChakraRenderProvider blocks={blocks}>
    {blocks.map((block) => (
        <NotionBlockRender key={block.id} block={block}/>
    ))}
</NotionBlockChakraRenderProvider>;

Block Render Customization

Some blocks supported by the Notion API do not yet have a render implementation. You can implement these block renders yourself or even customize the ones that already exist.

import {Code} from "@chakra-ui/react";
import {NotionBlockRender, NotionTextRender} from "@grbtec/notion-block-chakra-render";

function CustomNotionCodeRender({block}) {
    return (
        <Code>
            <NotionTextRender text={block.code.text}/>
        </Code>
    );
}

<NotionBlockRender
    block={block}
    customRenders={{
        "code": CustomNotionCodeRender
    }}
/>

Internalization

You can set text messages for your locale. Set the i18n properties in the top level of your start file (e.g. _app.js)

import {i18n} from "@grbtec/notion-block-chakra-render";

i18n.messages = {
    unsupportedBlock: "{0} Unsupported block",
    downloadFile: "Download File {0}",
    unsupportedVideo: "Unsupported Video",
    accessPage: "Access Page",
    file: "File"
}
i18n.dateformat.monthNames = [
    // Follow instruction of 'dateform'
    // https://www.npmjs.com/package/dateformat/v/4.5.1#Localization
]

// Start point of your project
function MyApp({Component, pageProps}) {
}

Properties

NotionBlockRender

| Parameter | Type | Definition | |---------------|-------------------------------|-------------------------------------------| | block | Block | Block data that came from the Notion API. | | customRenders | {[type: string]: Function}? | Render functions for each block type |

NotionTextRender

| Parameter | Type | Definition | |---------------|-------------------------------|---------------------------------| | text | Array<RichText> | Text that came from Notion API. |

NotionBlockChakraRenderProvider

| Parameter | Type | Definition | |--------------------|----------------------------------|------------------------------| | blocks | Array<Block> | Notion Blocks. | | onClickLinkToPage | (linkToPage: LinkToPage)=>void | LinkToPage click handler. | | onClickUserMention | (mention: Mention)=>void | UserMention click handler. | | onClickPageMention | (mention: Mention)=>void | PageMention click handler. | | withoutStack | true? | Don't render Stack together. |