Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/takux/notion-block-renderer
https://github.com/takux/notion-block-renderer
nextjs notion notion-api react typescript
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/takux/notion-block-renderer
- Owner: takux
- License: mit
- Created: 2022-06-28T12:22:58.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-08T04:02:42.000Z (about 2 years ago)
- Last Synced: 2024-12-24T19:33:02.563Z (about 2 months ago)
- Topics: nextjs, notion, notion-api, react, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/notion-block-renderer
- Size: 284 KB
- Stars: 13
- Watchers: 1
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# notion-block-renderer
> v2.0.x ~: `isNextJS` of main props was removed.
> v2.3.x ~: Added new block type `table_of_contents`.
This package is suitable for use with Reactjs or Nextjs. Notion blocks are rendered into React components. That component has a CSS class name corresponding to the block type.
I'm a programmer ([@takumafujimoto](https://twitter.com/takumafujimoto)). I first created this feature for myself. Later, I thought it would be useful for everyone, so I made it public.
## Notion API verion
This package compatible to the `2022-02-22` and `2022-06-28` version of Notion API.
Notion API version: https://developers.notion.com/reference/changes-by-version
## Install
```
npm install notion-block-renderer
```
or
```
yarn add notion-block-renderer
```
## Demo & Example
- [Styled one-page exmale]()
## Usage
```js
import NotionBlocks from "notion-block-renderer";
const Sample = ({ blocks }) => {
return (
);
}
```
You have to pass `blocks`.
`blocks` is result of a response object as follows:
```js
const { results: blocks } = await notion.blocks.children.list({ block_id: id });
```
For more detail, see the Notion docs.
https://developers.notion.com/reference/get-block-children
## Available Blocks
| Block Type |
| --- |
| paragraph |
| heading_1 |
| heading_2 |
| heading_3 |
| bulleted_list_item |
| numbered_list_item |
| quote |
| callout |
| code |
| image |
| video |
| table_of_contents |
## Code Block Usage
By default, code blocks are unstyled. The option `isCodeHighlighter` can be used to easily set the style.
This package defaults to [react-syntax-highlighter](https://www.npmjs.com/package/react-syntax-highlighter) when `isCodeHighlighter` is `true`. Use.
```js
const Sample = ({ blocks }) => {
return (
);
}
```
You can also set custom style CSS for the `syntaxHighlighterCSS` option.
You can choose to provide
- your own CSS or
- use [react-syntax-highlighter](https://www.npmjs.com/package/react-syntax-highlighter)'s style.
### react-syntax-highlighter style usage
> Only Highlight.js of `react-syntax-highlighter`(not Prism.js) is supported at this time. So please use to import from `"react-syntax-highlighter/dist/cjs/styles/hljs"`. See: [https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/](https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/)
First you need to install `react-syntax-highlighter`.
https://www.npmjs.com/package/react-syntax-highlighter
Then import styles to use.
```js
import {
monokaiSublime,
irBlack,
tomorrowNightBright,
monokai,
} from "react-syntax-highlighter/dist/cjs/styles/hljs";
const Sample = ({ blocks }) => {
return (
);
}
```
### your own CSS style usage
`syntaxHighlighterCSS` has the following type.
```js
{
[key: string]: React.CSSProperties;
}
```
### Code block samples
**Unstyled:**
**Styled:**
## CSS example
https://github.com/takux/notion-block-renderer/tree/main/example/styles/tailwindcss-sample.css
## Props
The `NotionBlocks` component has several props.
| Prop name | Description | Default value | Example values |
| --- | --- | --- | --- |
| blocks | Notion api blocks. See [Notion docs](https://developers.notion.com/reference/get-block-children). | (None) | --- |
| prefix | Add prefix to className of each html component. | "nbr" | --- |
| blockPrefix | Add prefix to className of each block html component. | "block" | --- |
| blocksPrefix | Add prefix to className of blocks html component. | "blocks" | --- |
| isCodeHighlighter | Code block's style. If true, code blocks are styled by CSS. | false | true |
| syntaxHighlighterCSS | If `isCodeHighlighter` is true, you can change style to your own CSS. Using [react-syntax-highlighter](https://www.npmjs.com/package/react-syntax-highlighter)'s styled CSS is easy way. | `tomorrowNightBright` | `monokaiSublime` |
### type
The props type for `blocks` is as follows. This is just a reference code. See currect type: [types.ts](https://github.com/takux/notion-block-renderer/blob/main/src/types/types.ts).
```js
type BlocksProps = {
blocks: BlockType[];
prefix?: string;
blockPrefix?: string;
blocksPrefix?: string;
isCodeHighlighter?: boolean;
syntaxHighlighterCSS?: {
[key: string]: React.CSSProperties;
};
};
```
> The `BlockType` is our original declarative type. The best way may refer to [@notionhq/client](https://www.npmjs.com/package/@notionhq/client)'s type. Replacing code would be taking time. So please contribute if you can.
## About me
* [Twitter](https://twitter.com/takumafujimoto)
* [My Homepage](https://takux.one/)
* [MY Blog](https://www.rabbitriver.page/)