Repository files navigation

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

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

This package doesn't handle the communication with the API. Check outnotion-api-worker for an easy solution.

_{Created byTimo Lins &Tobias Lins with the help of allcontributors ❤️}

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

🎯Accurate – Results arealmost identical

🔮Code Highlighting – Automatic code highlighting withprismjs

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

* First Meaningful Paint compared to ahosted example onVercel.

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 outreact-notion-x.

npm install react-notion

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 highlightingimport{NotionRenderer}from"react-notion";importresponsefrom"./load-page-chunk-response.json";// https://www.notion.so/api/v3/loadPageChunkconstblockMap=response.recordMap.block;exportdefault()=>(<divstyle={{maxWidth:768}}><NotionRendererblockMap={blockMap}/></div>);

A working example can be found inside theexample directory.

In this example we useNext.js for SSG. We usenotion-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";exportasyncfunctiongetStaticProps(){constdata=awaitfetch("https://notion-api.splitbee.io/v1/page/<NOTION_PAGE_ID>").then(res=>res.json());return{props:{blockMap:data}};}exportdefault({ blockMap})=>(<divstyle={{maxWidth:768}}><NotionRendererblockMap={blockMap}/></div>);

List of pages that implement this library.

• Splitbee Blog
• PS Tunnel
• timo.sh –Source

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

When using a code block in your Notion page,NotionRenderer will useprismjs 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 usingreact-notion in anext.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}';

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