/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.

Primary LanguageJavaScript

Welcome to notion-components 👋

Version License: MIT Twitter: Sarve\_\_\_tanvesh

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

TextBoxDemo.gif

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

buttonDropdownNeural.gif

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

Author

👤 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.