post-it-react v1.1.0

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