Post it

The sticky notes library

Post It is a React library that allows you to create and manage sticky notes easily and in a customizable way. It simplifies the creation of interactive user interfaces with notes that can be moved, edited, customized, and deleted effortlessly.

View package View repo
Hola, soy un post it!
I'm a post it!
npm i post-it-react
Hola, soy un post it!
I'm a post it!
npm i post-it-react

How to use it?

Hi, I am a post it! 🧉

Interactive actions

Post-It allows you to perform the following optional actions with your sticky notes.

Copy action 📋
Delete action ❌
Block action 🔒
Custom action ✅
  import PostIt from 'post-it-react'

  function App() {
    return (
      <>
        {/* Copy action: Copy the Post It value text */}
        <PostIt id={'id-1'} position={{ x: 101, y: 78 }} fill={'#FEE440'} text={'Copy action 📋'} action={'copy'} />

        {/* Delete action: Delete the Post It */}
        <PostIt id={'id-2'} position={{ x: 238, y: 211 }} fill={'#FEE440'} text={'Delete action ❌'} action={'delete'} />

        {/* Block action: Blocks dragging functionality of the Post It */}
        <PostIt id={'id-3'} position={{ x: 440, y: 74 }} fill={'#FEE440'} text={'Block action 🔒'} action={'block'} />

        {/* Custom action: Set your own custom action */}
        <PostIt id={'id-3'} position={{ x: 661, y: 192 }} fill={'#FEE440'} text={'Custom action ✅'} action={
          [
            <span>❗</span>, // Custom button
            () => alert('Custom action!'), // Custom function
            'custom-action-class', // Custom class
            { fill: '#EFE9AE' } // Custom style (optional)
          ]
        } />
      </>
    )
  }

Disable actions

You can disable the actions of moving, editing, and deleting sticky notes.

Edit disabled ✍
Delete disabled ❌
Drag disabled 🛑
  import PostIt from 'post-it-react'

  function App() {
    return (
      <>
        {/* Edit disabled: Disables the edit functionality of the Post It */}
        <PostIt id={'id-1'} position={{ x: 120, y: 78 }} fill={'#FEE440'} text={'Edit disabled ✍'} disableEditPostIt />

        {/* Delete disabled: Disables the delete functionality of the Post It  */}
        <PostIt id={'id-2'} position={{ x: 380, y: 211 }} fill={'#FEE440'} text={'Delete disabled ❌'} disableDeletePostIt />

        {/* Drag action: Disables the drag functionality of the Post It */}
        <PostIt id={'id-3'} position={{ x: 640, y: 74 }} fill={'#FEE440'} text={'Drag disabled 🛑'} disableDragPostIt />
      </>
    )
  }

Other styles...

There are other types of Post Its with predefined styles.

Hi, I am a post it! 🧉
Hi, I am a post it! 🧉
  import PostIt from 'post-it-react'

  function App () {
    return (
      <>
        <PostIt id={'unique-id'} position={{ x: 116, y: 162 }} text={'Hi, I am a post it! 🧉'} action={'copy'} fill={'#FEE440'} styleBentCorner />
        <PostIt id={'unique-id'} position={{ x: 610, y: 162 }} text={'Hi, I am a post it! 🧉'} fill={'#FEE440'} stylePinned />
      </>
    )
  }

Property guide

Here are all the properties that each Post It accepts.

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, React.CSSProperties?] Set an action button with onClick function for post it 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