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

This packages 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.

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.

• PS Tunnel
• Splitbee

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
Checkbox	❌ Missing
Table Of Contents	❌ Missing

Credits

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