A fast and semantic Notion API data renderer for react projects.
MIT License
A fast and semantic Notion API data renderer for react projects.
To install the package run the following command.
npm install tetrapack
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} />
);
}
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>
);
{
blocks: {...},
annotations: {...},
wrapper: ...
}
eg- all special blocks that need extra parameter are made like this.
(text, href) => <a href={href}>{text}</a>