Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xennis/react-notion-render
Use Notion as a headless CMS for your React (e.g. Next.js) website.
https://github.com/xennis/react-notion-render
cms nextjs notion notion-api react tailwindcss
Last synced: 3 months ago
JSON representation
Use Notion as a headless CMS for your React (e.g. Next.js) website.
- Host: GitHub
- URL: https://github.com/xennis/react-notion-render
- Owner: Xennis
- License: mit
- Created: 2024-05-24T01:02:31.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-09-23T17:43:36.000Z (3 months ago)
- Last Synced: 2024-10-12T12:02:32.903Z (3 months ago)
- Topics: cms, nextjs, notion, notion-api, react, tailwindcss
- Language: TypeScript
- Homepage: https://xennis.github.io/react-notion-render/
- Size: 175 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-notion-render
**[Demo](https://xennis.github.io/react-notion-render/)**
Renders the JSON response of the official Notion API as React components. Styling is done via Tailwind CSS.
# Features
- ✅ Render the response of the _official_ Notion API
- ✅ Resolving links
- ✅ Downloading images uploaded to Notion
- ✅ No JavaScript dependencies (except for React itself)
- Internationalization:
- ✅ `formatDateFn` allows to consider locale
- ✅ RTL direction is supported
- ✅ Dark mode is supported
Checkout the [Demo](https://xennis.github.io/react-notion-render/).
## Packages
| Package dir | NPM version | Size |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `fetch` | [](https://www.npmjs.com/package/@xennis/react-notion-cms-fetch) | [](https://bundlephobia.com/package/@xennis/react-notion-cms-fetch) |
| `render` | [](https://www.npmjs.com/package/@xennis/react-notion-cms-render) | [](https://bundlephobia.com/package/@xennis/react-notion-cms-render) |
## Installation
```shell
# Add the render package
npm install @xennis/react-notion-cms-render
# (Optional) Add the fetch package
npm install @xennis/react-notion-cms-fetch
```
Next, add the package to you Tailwind CSS config:
```diff
import type { Config } from "tailwindcss"
const config: Config = {
content: [
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+ "./node_modules/@xennis/react-notion-cms-render/**/*.{js,jsx}",
],
}
export default config
```
## Usage
```tsx
import { Client } from "@notionhq/client"
import { fetchBlocksChildren, Render } from "@xennis/react-notion-cms-render"
import "@xennis/react-notion-cms-render/dist/styles.css"
const client = new Client({ auth: "" })
const blocks = await fetchBlocksChildren(client, { block_id: "" })
const component =
```
A working example can be found in the [example directory](https://github.com/Xennis/react-notion-render/blob/main/examples/nextjs/src/app/page.tsx).
## Supported blocks
Create a pull request or issue if something is missing.
| Notion Block | Supported | Note |
| -------------------- | --------- | --------------------------------------------------------------------------------------------------------- |
| `audio` | ❌ | |
| `breadcrumb` | ❌ | |
| `bookmark` | ✅ | without preview image |
| `bulleted_list_item` | ✅ | including nested lists |
| `callout` | ✅ | |
| `child_database` | ❌ | |
| `child_page` | ✅ | |
| `code` | ✅ | syntax highlighting possible: [Highlight.js example](https://xennis.github.io/react-notion-render/custom) |
| `column` | ✅ | |
| `column_list` | ✅ | |
| `divider` | ✅ | |
| `embed` | ❌ | |
| `equation` | ❌ | |
| `file` | ❌ | |
| `heading_1` | ✅ | including toggled heading |
| `heading_2` | ✅ | including toggled heading |
| `heading_3` | ✅ | including toggled heading |
| `image` | ✅ | |
| `link_preview` | ❌ | |
| `link_to_page` | ❌ | |
| `numbered_list_item` | ✅ | including nested lists |
| `paragraph` | ✅ | |
| `pdf` | ❌ | |
| `quote` | ✅ | |
| `synced_block` | ✅ | |
| `table_of_contents` | ❌ | |
| `table` | ✅ | |
| `table_row` | ✅ | |
| `template` | ❌ | |
| `to_do` | ✅ | |
| `toggle` | ✅ | |
| `video` | ➕ | embed possible: [YouTube example](https://xennis.github.io/react-notion-render/custom) |
## Credits
How to render the Notion blocks is inspired by [react-notion-x](https://github.com/NotionX/react-notion-x) started by [Travis Fischer](https://github.com/transitive-bullshit).