react-notion

!react-notion

!npm version !npm version !minzipped sized

A React renderer for Notion pages.
Use Notion as CMS for your blog, documentation or personal site.

react-notion was developed by Splitbee. Splitbee is a fast, reliable, free, and modern analytics for any team.

_This package doesn't handle the communication with the API. Check out notion-api-worker for an easy solution_.

_{Created by Timo Lins & Tobias Lins with the help of all contributors ❤️}

Features

⚡️ Fast – Up to 10x faster than Notion\*

🎯 Accurate – Results are _almost_ identical

🔮 Code Highlighting – Automatic code highlighting with prismjs

🎨 Custom Styles – Styles are easily adaptable. Optional styles included

_\* First Meaningful Paint compared to a hosted example on Vercel._

react-notion is best suited as minimal renderer for blogs & content pages. If you're looking for a full-featured solution to render Notion-like pages, check out react-notion-x.

Install

``bash
npm install react-notion
`

How to use

$3

We can store the API response in a .json file and import it.

`js
import "react-notion/src/styles.css";
import "prismjs/themes/prism-tomorrow.css"; // only needed for code highlighting
import { NotionRenderer } from "react-notion";

import response from "./load-page-chunk-response.json"; // https://www.notion.so/api/v3/loadPageChunk

const blockMap = response.recordMap.block;

export default () => (



);
`

A working example can be found inside the example directory.

$3

In this example we use Next.js for SSG. We use notion-api-worker to fetch data from the API.

/pages/my-post.jsx

`js
import "react-notion/src/styles.css";
import "prismjs/themes/prism-tomorrow.css";

import { NotionRenderer } from "react-notion";

export async function getStaticProps() {
const data = await fetch(
"https://notion-api.splitbee.io/v1/page/"
).then(res => res.json());

return {
props: {
blockMap: data
}
};
}

export default ({ blockMap }) => (



);
`

Sites using react-notion

List of pages that implement this library.

- Splitbee Blog
- PS Tunnel
- timo.sh – _Source_

Supported Blocks

Most common block types are supported. We happily accept pull requests to add support for the missing blocks.

| Block Type | Supported | Notes |
| ----------------- | ---------- | ------------------------------------------------------------------------------------- |
| Text | ✅ Yes | |
| Heading | ✅ Yes | |
| Image | ✅ Yes | |
| Image Caption | ✅ Yes | |
| Bulleted List | ✅ Yes | |
| Numbered List | ✅ Yes | |
| Quote | ✅ Yes | |
| Callout | ✅ Yes | |
| Column | ✅ Yes | |
| iframe | ✅ Yes | |
| Video | ✅ Yes | Only embedded videos |
| Divider | ✅ Yes | |
| Link | ✅ Yes | |
| Code | ✅ Yes | |
| Web Bookmark | ✅ Yes | |
| Toggle List | ✅ Yes | |
| Page Links | ✅ Yes | |
| Header | ✅ Yes | Enable with fullPage |
| Databases | ❌ Missing | Not planned. Supported by react-notion-x |
| Checkbox | ❌ Missing | Supported by react-notion-x |
| Table Of Contents | ❌ Missing | Supported by react-notion-x |

Block Type Specific Caveats

When using a code block in your Notion page, NotionRenderer will use prismjs to detect the language of the code block.
By default in most project, prismjs won't include all language packages in the minified build of your project.
This tends to be an issue for those using react-notion in a next.js project.
To ensure the programming language is correctly highlighted in production builds, one should explicitly imported into the project.

`jsx
import 'prismjs/components/prism-{language}';
``

Credits

- Tobias Lins – Idea, Code
- Timo Lins – Code, Documentation
- samwightt – Inspiration & API Typings
- All people that contributed 💕