Notion-Blocks

NPM PACKAGE

LIVE DEMO

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) |

FetchNotionBlocks

Function to only be used on the backend where secrets are not exposed to the client

| prop | type | description | | ------------ | ------ | ------------------------------ | | notionKey | string | notion secret key | | notionPageId | string | ID of page you'd like to fetch |

Not Supported

• link to page (not to be confused with child page or embedded pages which are supported)

Development

Local Setup

Setup

Install dependencies

yarn

local StoryBook

yarn storybook

Building

yarn rollup