Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jaysongiroux/notion-blocks
Customizable notion blocks npmjs package
https://github.com/jaysongiroux/notion-blocks
notion notion-api npmjs react storybook typescript
Last synced: 6 days ago
JSON representation
Customizable notion blocks npmjs package
- Host: GitHub
- URL: https://github.com/jaysongiroux/notion-blocks
- Owner: jaysongiroux
- Created: 2023-04-25T06:00:14.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-06-01T22:49:15.000Z (over 1 year ago)
- Last Synced: 2024-12-22T12:07:14.201Z (about 1 month ago)
- Topics: notion, notion-api, npmjs, react, storybook, typescript
- Language: TypeScript
- Homepage: http://notion-blocks.jasongiroux.com
- Size: 3.89 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Notion-Blocks
[](https://github.com/semantic-release/semantic-release)
[](https://badge.fury.io/js/notion-blocks)
[](http://notion-blocks.jasongiroux.com)
A React component package to be given the `blocks` from the notion API to render in browser
[NPM PACKAGE](https://www.npmjs.com/package/notion-blocks)
[LIVE DEMO](http://notion-blocks.jasongiroux.com)
## Use
### NotionBlocks
```js
import {NotionBlocks} from 'notion-blocks'
import 'notion-blocks/dist/styles/katex.css'
export const example = () => {
const blocks = BLOCKS_FROM_NOTION_API;
return (
)
}
```
### FetchNotionBlocks
```js
import { FetchNotionBlocks } from 'notion-blocks';
const { cover, response, blocks } = await FetchNotionBlocks({
notionkey: process.env.NOTION_KEY,
notionPageId: PAGE_ID,
});
```
## API
### NotionBlocks
| Prop | type | Description |
| ------------------ | -------- | -------------------------------------------------------------------------------------------------------- |
| blocks | object | list of blocks that can be acquired from Notion's API |
| codeTheme | string | `light` or `dark` |
| containerStyle | object | Object to style container where blocks are rendered |
| codeOverlay | boolean | To Show overlay in code block that allows users to copy code, and see the language within the code block |
| headerStyles | object | Style overrides for headers, These overrides do not include toggle headers |
| toggleHeaderStyles | object | Style overrides for toggle headers. These styles do not include the content within the headers |
| toggleStyles | object | Style overrides for toggle lists. These styles do not include the content within the headers |
| codeStyles | object | styles placed onto the code block container. |
| pictureStyles | object | styles for pictures |
| calloutStyles | object | styles for callout container |
| quoteStyles | object | styles for quote container |
| listStyles | object | styles for individual block container |
| columnStyles | object | styles for column container |
| bookmarkStyles | object | styles for bookmark container |
| equationStyles | object | styles for Equation container |
| childPageStyles | object | styles for child page container |
| tableStyle | object | styles for table container |
| tableRowStyle | object | styles for all table rows except headers |
| tableHeaderStyle | object | styles for table headers row and columns |
| onChildPageClick | function | function to be called if user clicks on child page block. `(id, title) => console.log(id, title)` |
### FetchNotionBlocks
Function to only be used on the backend where secrets are not exposed to the client
| prop | type | description |
| ------------ | ------ | ------------------------------ |
| notionKey | string | notion secret key |
| notionPageId | string | ID of page you'd like to fetch |
## Not Supported
- link to page (not to be confused with child page or embedded pages which are supported)
# Development
## Local Setup
### Setup
Install dependencies
```bash
yarn
```
### local StoryBook
```bash
yarn storybook
```
### Building
```bash
yarn rollup
```