@grbtec/notion-block-chakra-render v1.0.0

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

NotionTextRender

NotionBlockChakraRenderProvider