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: 12345String: post-it-id-1Other 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: yellowHex: #EFE9AE | | color? | string | Set the text color of post it | black | ColorName: blackHex: #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 | TrueFalse 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 | TrueFalse | | stylePinned? | boolean | Set the preset style (stylePinned) for post it if true | false | TrueFalse | | 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 | nonecopydeleteblock[<span>❗</span>, handleShowInfo, action-class, { fill: '#EFE9AE' }] | | actionFixed? | boolean | Set the action button to always be visible | false | TrueFalse | | disableEditPostIt? | boolean | Disable the edit functionality of post it if true | false | TrueFalse | | disableDeletePostIt? | boolean | Disable the delete functionality of post it if true | false | TrueFalse | | disableDragPostIt? | boolean | Disable the drag functionality of post it if true | false | TrueFalse |