0.2.1 • Published 10 months ago
tetrapack v0.2.1
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.
npm install tetrapack
Usage -
Import the Parser component in your file, You can use alias while importing to change name of the component.
import { Parser } from "tetrapack";
export default function(){
// rest of the body
return (
<Parser blocks={blocks} />
);
}
Customization of Blocks -
You can pass custom components or different tags for all the blocks( that parser supports).
// Just the parser component
return (
<Parser blocks={paragraphs} getBlocks={tableBlocks}>
{() => ({
blocks: {
paragraph: (text) => (
<div
style={{
margin: "10px",
}}
>
DIE-WILL-WHEATON-DIE
</div>
),
},
wrapper: (text) => (<div>{text}</div>)
})}
</Parser>
);
- 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
{
blocks: {...},
annotations: {...},
wrapper: ...
}
Wrapper
- wrapper
Blocks
- heading_1
- heading_2
- heading_3
- paragraph
- list_item
- bulleted_list
- numbered_list
- quote
- callout_image
- callout
- divider
- to_do
- code
- table
- page
Annotations
- bold
- italic
- strikethrough
- underline
- code
- link
eg- all special blocks that need extra parameter are made like this.
(text, href) => <a href={href}>{text}</a>