react-notion - GitLite

KO | EN

gitlite — search

#hacktoberfest #ai #llm #go #golang #rust #linux #docker #cli #awesome-list #pytorch #mcp #openai #open-source

react-notion

(★ 3,000)

A fast React renderer for Notion pages

File Explorer

Download Latest Version (.zip)

- - build.yml
- - [pageId].tsx
  - _app.tsx
  - index.tsx
- next-env.d.ts
- package.json
- tsconfig.json
- yarn.lock
- - asset.tsx
  - code.tsx
  - page-header.tsx
  - page-icon.tsx
- block.tsx
- index.tsx
- renderer.tsx
- styles.css
- types.ts
- utils.ts
.gitignore
LICENSE
package.json
README.md
tsconfig.json
tsdx.config.js
yarn.lock

🚀 Installation Guide

1. Get the code

git clone https://github.com/splitbee/react-notion

Downloads the entire project code from GitHub to your computer.

cd react-notion

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install react-notion

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![react-notion](https://user-images.githubusercontent.com/1440854/79684011-6c948280-822e-11ea-9e23-1644903796fb.png)

![npm version](https://badgen.net/npm/v/react-notion) ![npm version](https://badgen.net/david/dep/splitbee/react-notion) ![minzipped sized](https://badgen.net/bundlephobia/minzip/react-notion)

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

**`react-notion` was developed by <a href="http://splitbee.io/">Splitbee</a>. 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_.

<sub>Created by <a href="https://twitter.com/timolins">Timo Lins</a> & <a href="https://twitter.com/linstobias">Tobias Lins</a> with the help of all <a href="https://github.com/splitbee/react-notion/graphs/contributors">contributors</a> ❤️</sub>

## 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 () => (
  <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](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/<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.

- [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)