The current version is just a personal test version

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
• 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 | | | Checkbox | ❌ Missing | | | Table Of Contents | ❌ Missing | | | Date | ✅ Yes | set default timezone as Shanghai |

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 💕