Notion-blocks NPM

Notion-Blocks

alt text

Use

NotionBlocks

import {NotionBlocks} from 'notion-blocks'
import 'notion-blocks/dist/styles/katex.css'


export const example = () => {
  const blocks = BLOCKS_FROM_NOTION_API;

  return (
    <NotionBlocks blocks={blocks}>
  )
}

FetchNotionBlocks

import { FetchNotionBlocks } from 'notion-blocks';

const { cover, response, blocks } = await FetchNotionBlocks({
  notionkey: process.env.NOTION_KEY,
  notionPageId: PAGE_ID,
});

API

NotionBlocks

Prop	type	Description
blocks	object	list of blocks that can be acquired from Notion's API
codeTheme	string	`light` or `dark`
containerStyle	object	Object to style container where blocks are rendered
codeOverlay	boolean	To Show overlay in code block that allows users to copy code, and see the language within the code block
headerStyles	object	Style overrides for headers, These overrides do not include toggle headers
toggleHeaderStyles	object	Style overrides for toggle headers. These styles do not include the content within the headers
toggleStyles	object	Style overrides for toggle lists. These styles do not include the content within the headers
codeStyles	object	styles placed onto the code block container.
pictureStyles	object	styles for pictures
calloutStyles	object	styles for callout container
quoteStyles	object	styles for quote container
listStyles	object	styles for individual block container
columnStyles	object	styles for column container
bookmarkStyles	object	styles for bookmark container
equationStyles	object	styles for Equation container
childPageStyles	object	styles for child page container
tableStyle	object	styles for table container
tableRowStyle	object	styles for all table rows except headers
tableHeaderStyle	object	styles for table headers row and columns
onChildPageClick	function	function to be called if user clicks on child page block. `(id, title) => console.log(id, title)`