Notion-components NPM

React Component Library for the minimalist
Prerequisites

node >=10

Install

npm install notion-components

When importing a component make sure to import the css file too. Like this
import  'notion-components/dist/index.css'

Simple `TextBox` Component

Renders an Invisible TextBox. In the above gif, There are two TextBox components. One is the heading, beside the emoji. Another one is the description, with a Lot of Text.

The Component itself is customizable with your css, So you have to set things like, font-size and font-weight to layout the TextBox accordingly.

App.js :

import  React, { useState }  from  'react'
import { TextBox } from  'notion-components'
import  'notion-components/dist/index.css'

import './App.css'

const App = () => {
const [text, setText] =  useState('Meeting Notes')

const  onChangeHandler  = (value) => {
		setText(value)
}
return (
		<TextBox
			onChangeHandler={onChangeHandler}
			placeholder='Untitled'
			initialValue={text}
			customClassName="textbox"
		/>
	);
}
export default App

App.css :

.textbox{
	font-size: 4rem;
	font-weight: 700;
}

Simple `Button` props

Attribute	Type	Default	Description
placeholder	`string`	`empty string`	Renders when the `TextBox` is empty
disabled	`bool`	`false`	Should render a disabled `TextBox`, if set to `true`
className	`string`	`null`	Pass your css className here. Works with `css modules` too.
onChangeHandler	`function`	`null`	A function that gets `value` inside TextBox as an argument at every keypress
placeholderColor	`string \| css color`	`'#e1e1e0'`	Css color that sets the placeholder color
initialValue	`string`	`null`	The value inside the `TextBox` before the initial render

Simple `Button` rendered with a Dropdown

Renders a Button with a dropdown. We have to pass an array of options with two properties, value and function like in the example below.

import  React  from  'react'
import { Button } from  'notion-components'
import  'notion-components/dist/index.css'

const  App  = () => {
		const  first  = () => {
				console.log('1st option was clicked')
		}
		const  second  = () => {
				console.log('2nd option was clicked')
		}
		const  third  = () => {
				console.log('3rd option was clicked')
		}
		const  onPress  = () => {
				console.log('Did you just click me?!')
		}

		const  options  = [
				{
					value: 'Started from the bottom',
					function: first
				},
				{
					value: 'Sometimes its the journey',
					function: second
				},
				{
					value: 'Trust the process',
					function: third
				}
		]

		return (
				<Button  top='100%'  left='30px'  options={options}  onClick={() =>  onPress()}>
					New
				</Button>
		);
}
export  default  App

Simple `Button` rendered without a Dropdown

Button without a dropdown

Renders a Button without a dropdown. If the option prop's length is found to be 0 or if its value is null, then the deopdown will not render at all.

import  React  from  'react'
import { Button } from  'notion-components'
import  'notion-components/dist/index.css'

const  App  = () => {
		const  onPress  = () => {
				console.log('Did you just click me?!')
		}
		return (
				<Button onClick={() =>  onPress()}>
					New
				</Button>
		);
}
export  default  App

Simple `Button` props

Attribute	Type	Default	Description
onClick	`function`	`null`	Default click/press function
disabled	`bool`	`false`	Should render a disabled button
options	`array`	`null`	An array of objects with properties .If empty array is passed, Dropdown button will not render
top	`string`	`"80%"`	Controls the `top` css property for the Dropdown
left	`string`	`"0px"`	Controls the `left` css property for the Dropdown
width	`string`	`null`	Controls the `width` css property for the Dropdown