tanvesh01/notion-components

A React Component Library for the minimalists. Build your web app with a design system already in place. Highly inspired by Notion - The all-in-one workplace.

Welcome to notion-components 👋

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'
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

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

Author

👤 tanvesh01

• Website: tanvesh.vercel.app

• Twitter: @Sarve___tanvesh

• Github: @tanvesh01

• LinkedIn: @tanvesh01

Show your support

Please Give a ⭐️ if this project helped you! It will motivate me to keep working on this!

License

MIT. Copyright (c) 2021 Tanvesh Sarve.