Skip to content

Latest commit

 

History

History
108 lines (85 loc) · 8.02 KB

README.md

File metadata and controls

108 lines (85 loc) · 8.02 KB
Raw

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 NPM version NPM bundle size
render NPM version NPM bundle size

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.