Skip to content

A fast and semantic Notion API data renderer for react projects.

License

Notifications You must be signed in to change notification settings

ashishk1331/tetrapack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Banner Image

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>

About

A fast and semantic Notion API data renderer for react projects.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published