Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/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.
https://github.com/tanvesh01/notion-components
component-library design-system npm-package reactjs
Last synced: about 11 hours ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/tanvesh01/notion-components
- Owner: tanvesh01
- Created: 2021-01-05T04:22:36.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T14:36:55.000Z (11 months ago)
- Last Synced: 2024-10-28T15:30:44.588Z (10 days ago)
- Topics: component-library, design-system, npm-package, reactjs
- Language: JavaScript
- Homepage: https://notion-components.vercel.app/
- Size: 2.63 MB
- Stars: 19
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Welcome to notion-components 👋
> React Component Library for the minimalist
## Prerequisites
- node >=10
## Install
```sh
npm install notion-components
```
> When importing a component make sure to import the css file too. Like this
```jsx
import 'notion-components/dist/index.css'
```
### Simple `TextBox` Component
[](https://gifyu.com/image/akA2)
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` :
```jsx
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 (
);
}
export default App
```
`App.css` :
```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
[](https://gifyu.com/image/Uvr8)
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.
```jsx
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 (
onPress()}>
New
);
}
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.
```jsx
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 (
onPress()}>
New
);
}
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](https://tanvesh.vercel.app/)
* Twitter: [@Sarve\_\_\_tanvesh](https://twitter.com/Sarve\_\_\_tanvesh)
* Github: [@tanvesh01](https://github.com/tanvesh01)
* LinkedIn: [@tanvesh01](https://linkedin.com/in/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.