Notion Blocks - A NPM Package

Notion has a pretty awesome API but no React package to render the output of this API! Notion-Blocks gives you the ability to render everything in a single component and provide a helper function to fetch all nested blocks for each page.

Problem

Notion is a fantastic note taking app and great at putting together beautiful documentation, blog posts, tutorials and more quickly. So, whats the problem? well… There are two problems; I want to use Notion to create and share these blog posts on my own React projects, and Notion’s API doesn’t provide information on nested elements (like sub lists)

Solution

I built Notion-Blocks to be able to render all of Notion’s components and provide the user with a backend only helper function that fetches every component, subcomponent and nested components within a given page.

Usage

Using the Notion-Blocks package is super easy to integrate into your own React Project

NotionBlocks

JavaScript

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

JavaScript

import { FetchNotionBlocks } from 'notion-blocks';

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

API

Lets Take a look at some of the props you can pass into this React component or helper function

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

Prop	Type	Description
notionKey	string	notion secret key
notionPageId	string	ID of page you’d like to fetch