Parse Notion blocks from official API to Chakra UI components
GPL-3.0 License
npm install notion-blocks-chakra-ui
or
yarn add notion-blocks-chakra-ui
import { Stack } from '@chakra-ui/react';
import { NotionBlock } from 'notion-blocks-chakra-ui';
// fetch `blocks` from a Notion API call
<Stack>
{blocks.map((block) => (
<NotionBlock key={block.id} block={block} />
))}
</Stack>;
In order to parse images and video, because it is natively unsupported by Notion API, you need to add this kind of block in your Notion doc:
[image, <imageUrl>]
[video, <video>]
[youtube, <youtubeId>]
<NotionBlock
block={block}
customImage={{
MyCustomComponent,
props: {
className: 'image',
},
}}
/>
Inspired by samuelkraft/notion-blog-nextjs