Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/splitbee/react-notion
A fast React renderer for Notion pages
https://github.com/splitbee/react-notion
headless-cms notion react
Last synced: 5 days ago
JSON representation
A fast React renderer for Notion pages
- Host: GitHub
- URL: https://github.com/splitbee/react-notion
- Owner: splitbee
- License: mit
- Created: 2020-04-14T09:46:16.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-28T07:44:29.000Z (3 months ago)
- Last Synced: 2025-01-14T06:04:55.549Z (12 days ago)
- Topics: headless-cms, notion, react
- Language: TypeScript
- Homepage: https://react-notion.com
- Size: 573 KB
- Stars: 2,914
- Watchers: 28
- Forks: 157
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starz - splitbee/react-notion - A fast React renderer for Notion pages (TypeScript)
- awesome-list - react-notion
- awesome-notion - React Notion - A React renderer for Notion pages. Use Notion as CMS for blog, documentation or personal site. (Renderers)
- jimsghstars - splitbee/react-notion - A fast React renderer for Notion pages (TypeScript)
README
  
A React renderer for Notion pages.
Use Notion as CMS for your blog, documentation or personal site.
**`react-notion` was developed by Splitbee. Splitbee is a fast, reliable, free, and modern analytics for any team.**
_This package doesn't handle the communication with the API. Check out [notion-api-worker](https://github.com/splitbee/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](https://prismjs.com/)
🎨 **Custom Styles** – Styles are easily adaptable. Optional styles included
_\* First Meaningful Paint compared to a [hosted example](http://react-notion-example.now.sh/) on [Vercel](https://vercel.com)._
**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 out [react-notion-x](https://github.com/NotionX/react-notion-x).
## Install
```bash
npm install react-notion
```
## How to use
### Minimal Example
We can store the API response in a `.json` file and import it.
```js
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 () => (
);
```
A working example can be found inside the `example` directory.
### Next.js Example
In this example we use [Next.js](https://github.com/zeit/next.js) for SSG. We use [notion-api-worker](https://github.com/splitbee/notion-api-worker) to fetch data from the API.
`/pages/my-post.jsx`
```js
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/"
).then(res => res.json());
return {
props: {
blockMap: data
}
};
}
export default ({ blockMap }) => (
);
```
## Sites using react-notion
List of pages that implement this library.
- [Splitbee Blog](https://splitbee.io/blog)
- [PS Tunnel](https://pstunnel.com/blog)
- [timo.sh](https://timo.sh) – _[Source](https://github.com/timolins/timo-sh)_
## 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 | Not planned. Supported by [react-notion-x](https://github.com/NotionX/react-notion-x) |
| Checkbox | ❌ Missing | Supported by [react-notion-x](https://github.com/NotionX/react-notion-x) |
| Table Of Contents | ❌ Missing | Supported by [react-notion-x](https://github.com/NotionX/react-notion-x) |
## 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.
```jsx
import 'prismjs/components/prism-{language}';
```
## Credits
- [Tobias Lins](https://tobi.sh) – Idea, Code
- [Timo Lins](https://timo.sh) – Code, Documentation
- [samwightt](https://github.com/samwightt) – Inspiration & API Typings
- [All people that contributed 💕](https://github.com/splitbee/react-notion/graphs/contributors)