react-notion-render

Demo

Renders the JSON response of the official Notion API as React components. Styling is done via Tailwind CSS.

Features

• ✅ Render the response of the official Notion API
• ✅ Resolving links
• ✅ Downloading images uploaded to Notion
• ✅ No JavaScript dependencies (except for React itself)
• Internationalization:
  • ✅ formatDateFn allows to consider locale
  • ✅ RTL direction is supported
• ✅ Dark mode is supported

Checkout the Demo.

Packages

Package dir	NPM version	Size
fetch
render

Installation

# Add the render package
npm install @xennis/react-notion-cms-render
# (Optional) Add the fetch package
npm install @xennis/react-notion-cms-fetch

Next, add the package to you Tailwind CSS config:

import type { Config } from "tailwindcss"

const config: Config = {
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+   "./node_modules/@xennis/react-notion-cms-render/**/*.{js,jsx}",
  ],
}
export default config

Usage

import { Client } from "@notionhq/client"
import { fetchBlocksChildren, Render } from "@xennis/react-notion-cms-render"
import "@xennis/react-notion-cms-render/dist/styles.css"

const client = new Client({ auth: "<NOTION AUTH TOKEN>" })

const blocks = await fetchBlocksChildren(client, { block_id: "<BLOCK UUID>" })

const component = <Render blocks={blocks} />

A working example can be found in the example directory.

Supported blocks

Create a pull request or issue if something is missing.

Notion Block	Supported	Note
audio	❌
breadcrumb	❌
bookmark	✅	without preview image
bulleted_list_item	✅	including nested lists
callout	✅
child_database	❌
child_page	✅
code	✅	syntax highlighting possible: Highlight.js example
column	✅
column_list	✅
divider	✅
embed	❌
equation	❌
file	❌
heading_1	✅	including toggled heading
heading_2	✅	including toggled heading
heading_3	✅	including toggled heading
image	✅
link_preview	❌
link_to_page	❌
numbered_list_item	✅	including nested lists
paragraph	✅
pdf	❌
quote	✅
synced_block	✅
table_of_contents	❌
table	✅
table_row	✅
template	❌
to_do	✅
toggle	✅
video	➕	embed possible: YouTube example

Credits

How to render the Notion blocks is inspired by react-notion-x started by Travis Fischer.