react-notion - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #ai #golang #go #android #machine-learning #macos #awesome #vue #awesome-list #pytorch #openai #mcp

react-notion

(★ 3,000)

A fast React renderer for Notion pages

파일 탐색기

최종 버전 다운로드 (.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

# 설치 가이드

1. 코드 내려받기

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

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-notion

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install react-notion

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 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)