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";

Pass the array of blocks of the page to render them,

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>