https://github.com/ashishk1331/tetrapack
A fast and semantic Notion API data renderer for react projects.
https://github.com/ashishk1331/tetrapack
nextjs13 notion notion-api reactjs storybook
Last synced: about 1 month ago
JSON representation
A fast and semantic Notion API data renderer for react projects.
- Host: GitHub
- URL: https://github.com/ashishk1331/tetrapack
- Owner: ashishk1331
- License: mit
- Created: 2023-06-24T12:59:26.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-28T06:10:33.000Z (almost 2 years ago)
- Last Synced: 2025-03-22T03:47:38.297Z (about 2 months ago)
- Topics: nextjs13, notion, notion-api, reactjs, storybook
- Language: JavaScript
- Homepage: https://tetra-docs.vercel.app/
- Size: 581 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tetra Pack
A fast and semantic Notion API data renderer for react projects.
## Features -
- Robust and granular Parser
- Keyed Approach
- Configurable blocks and annotations
- Loose Type Checking
## Installation -
To install the package run the following command.
```bash
npm install tetrapack
```
## Usage -
Import the Parser component in your file,
You can use alias while importing to change name of the component.
```js
import { Parser } from "tetrapack";
```
Pass the array of blocks of the page to render them,
```jsx
export default function(){
// rest of the body
return (
);
}
```
## Customization of Blocks -
You can pass custom components or different tags for all the blocks( that parser supports).
```jsx
// Just the parser component
return (
{() => ({
blocks: {
paragraph: (text) => (
DIE-WILL-WHEATON-DIE
),
},
wrapper: (text) => ({text})
})}
);
```
+ Every block should be a function that must return a JSX component.
+ Every block gets a parsed text as a parameter which is the innerHTML text for the component.
+ There are three options available: Blocks(like headings, images and to+do), Annotations(like bold and italic) and the Wrapper(which wraps all the blocks).
### Return Object
```js
{
blocks: {...},
annotations: {...},
wrapper: ...
}
```
### Wrapper
+ [x] wrapper
### Blocks
+ [x] heading_1
+ [x] heading_2
+ [x] heading_3
+ [x] paragraph
+ [x] list_item
+ [x] bulleted_list
+ [x] numbered_list
+ [x] quote
+ [x] callout_image
+ [x] callout
+ [x] divider
+ [x] to_do
+ [x] code
+ [ ] table
+ [ ] page
### Annotations
+ [x] bold
+ [x] italic
+ [x] strikethrough
+ [x] underline
+ [x] code
+ [x] link
eg- all special blocks that need extra parameter are made like this.
`(text, href) => {text}`