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:

  npm install post-it-react

Page

URL Page

Single post it example

import PostIt from 'post-it-react'

function App () {
  return <PostIt id={'unique-id'} position={{ x: 316, y: 212 }} text={'Hi, Im a post it! 🧉'} action={'copy'} fill={'#FEE440'} />
}

List post it example

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 }) => (
          <PostIt key={id} postItListState={[postItList, setPostItList]} id={id} position={position} text={text} fill={fill} action={'delete'} />
        ))
      }
    </>
  )
}

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<React.SetStateAction<T[]>>]	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