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 ❤️
⚡️ 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.
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 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.
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>
);
List of pages that implement this library.
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 |
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}';
- Tobias Lins – Idea, Code
- Timo Lins – Code, Documentation
- samwightt – Inspiration & API Typings
- All people that contributed 💕