https://github.com/nicolasaguero99/post-it-library
Post-It is a React library that allows you to create and manage sticky notes easily and customizable. It simplifies the creation of interactive user interfaces with notes that can be moved, edited, customized, and deleted easily.
https://github.com/nicolasaguero99/post-it-library
javascript libraries library notes npm npm-package postit react reactjs typescript
Last synced: 4 months ago
JSON representation
Post-It is a React library that allows you to create and manage sticky notes easily and customizable. It simplifies the creation of interactive user interfaces with notes that can be moved, edited, customized, and deleted easily.
- Host: GitHub
- URL: https://github.com/nicolasaguero99/post-it-library
- Owner: nicolasAguero99
- License: mit
- Created: 2024-07-16T02:45:25.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-08-20T22:29:51.000Z (almost 2 years ago)
- Last Synced: 2025-03-07T05:35:53.117Z (over 1 year ago)
- Topics: javascript, libraries, library, notes, npm, npm-package, postit, react, reactjs, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/post-it-react
- Size: 592 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Post it Library
Post It is a React library that allows you to create and manage sticky notes easily and customizable. It simplifies the creation of interactive user interfaces with notes that can be moved, edited, customized and deleted easily.
## Installation
To install Post It library:
```bash
npm install post-it-react
```
## Page
[URL Page](https://post-it-library.vercel.app/)
## Single post it example
```tsx
import PostIt from 'post-it-react'
function App () {
return
}
```
## List post it example
```tsx
import { useState, useEffect } from 'react'
import PostIt from 'post-it-react'
export default function App () {
const [postItList, setPostItList] = useState([])
useEffect(() => {
const clickEvent = (e: MouseEvent) => {
const isPostIt = (e.target as HTMLElement).classList.contains('post-it')
if (isPostIt) return
const postItData = {
id: crypto.randomUUID(),
position: { x: e.clientX, y: e.clientY },
text: '',
fill: '#FEE440'
}
setPostItList([...postItList, { ...postItData }])
}
window.addEventListener('dblclick', clickEvent)
return () => window.removeEventListener('dblclick', clickEvent)
}, [postItList])
return (
<>
{
postItList.length > 0 && postItList.map(({ id, position, text, fill }) => (
))
}
>
)
}
```
## Table of props
| Prop | Type | Description | Default | Examples |
| :-------- | :------- | :------- | :------- | :------------------------- |
| id | `T` | Set Id unique for post it | - |
- **Number**: 12345
- **String**: post-it-id-1
- Other values...
| position | `{ x: number, y: number }` | Set coords (x/y) for post it position | - | { x: 212, y: 316 } |
| text | `string` | Set text for post it | "" | Hi, I'm a post it! 🧉 |
| className? | `string` | Set Css class for post it | post-it-classic | post-it-class |
| fill? | `string` | Set the background-color of post it | yellow |
- **ColorName**: yellow
- **Hex**: #EFE9AE
| color? | `string` | Set the text color of post it | black |
- **ColorName**: black
- **Hex**: #000000
| opacity? | `number` | Set the opacity of post it (from 0 to 1) | `1` | `0 to 1` |
| rounded? | `number` | Set the border-radius of post it | `0` | `30` |
| hidden? | `boolean` | Set the display: hidden for post it if true | `false` |
- True
- False
font? | `[number / string(Css unit), {100-900} / {lighter-bolder}, string]` | Set the fontSize (if value is number it will be in px), fontWeight and fontFamily of the post it | ["", "", ""] |
- ['2em', 'bold', '"Inter", sans-serif']
- [18, 600, '"Inter", sans-serif']
- [18, '', '']
| postItListState? | `[T[], React.Dispatch>]` | Set the current state and the state updater function. This allows you to store all the post its and iterate through them | - | `[postItList, setPostItList]` _(Recommended: useState())_ |
| styleBentCorner? | `boolean` | Set the preset style (styleBentCorner) for post it if true | `false` |
- True
- False
| stylePinned? | `boolean` | Set the preset style (stylePinned) for post it if true | `false` |
- True
- False
| customPlaceholder? | `string / string[]` | Set one or more placeholders for post it. (If it is an array, each value will be set randomly) | Write something... |
- **String**: Write something...
- **Array**: ['Write here', 'Type something', 'I'm thinking about...']
| customDefaultText? | `string` | Set a initial default text for post it | "" | Default text example |
| action? | `none / copy / delete / block / [JSX.Element, ((...args: T[]) => T), string / null, React.CSSProperties?]` | Set a action button with onClick function for post it.
- **none**: -.
- **copy**: copy (clipboard) the current text of post it.
- **delete**: delete the post it.
- **block**: block the drag functionality of post it.
- **custom**: [Jsx.Element, function, class, style] | none |
- none
- copy
- delete
- block
- [<span>❗</span>, handleShowInfo, action-class, { fill: '#EFE9AE' }]
| actionFixed? | `boolean` | Set the action button to always be visible | `false` |
- True
- False
| disableEditPostIt? | `boolean` | Disable the edit functionality of post it if true | `false` |
- True
- False
| disableDeletePostIt? | `boolean` | Disable the delete functionality of post it if true | `false` |
- True
- False
| disableDragPostIt? | `boolean` | Disable the drag functionality of post it if true | `false` |
- True
- False