Use Notion as a headless CMS for your React (e.g. Next.js) website.
MIT License
Renders the JSON response of the official Notion API as React components. Styling is done via Tailwind CSS.
formatDateFn
allows to consider localeCheckout the Demo.
Package dir | NPM version | Size |
---|---|---|
fetch |
||
render |
# 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
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.
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 |
How to render the Notion blocks is inspired by react-notion-x started by Travis Fischer.