dvdsgl/react-notion

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.

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

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 💕

dvdsgl / react-notion