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

npm install react-notion

How to use

Minimal Example

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

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 () => (
  <div style={{ maxWidth: 768 }}>
    <NotionRenderer blockMap={blockMap} />
  </div>
);

A working example can be found inside the example directory.

Next.js Example

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

/pages/my-post.jsx

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/<NOTION_PAGE_ID>"
  ).then(res => res.json());

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

export default ({ blockMap }) => (
  <div style={{ maxWidth: 768 }}>
    <NotionRenderer blockMap={blockMap} />
  </div>
);

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.

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

Credits

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