{"id":15290779,"url":"https://github.com/nicolasaguero99/post-it-library","last_synced_at":"2026-03-03T06:37:09.626Z","repository":{"id":249335169,"uuid":"829227198","full_name":"nicolasAguero99/post-it-library","owner":"nicolasAguero99","description":"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.","archived":false,"fork":false,"pushed_at":"2024-08-20T22:29:51.000Z","size":606,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-07T05:35:53.117Z","etag":null,"topics":["javascript","libraries","library","notes","npm","npm-package","postit","react","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/post-it-react","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nicolasAguero99.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-16T02:45:25.000Z","updated_at":"2024-10-24T12:48:19.000Z","dependencies_parsed_at":"2024-07-20T04:33:33.413Z","dependency_job_id":"029eafe0-9ff3-413c-acb2-5a251c638955","html_url":"https://github.com/nicolasAguero99/post-it-library","commit_stats":null,"previous_names":["nicolasaguero99/post-it-library"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasAguero99%2Fpost-it-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasAguero99%2Fpost-it-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasAguero99%2Fpost-it-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasAguero99%2Fpost-it-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicolasAguero99","download_url":"https://codeload.github.com/nicolasAguero99/post-it-library/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242902476,"owners_count":20204110,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","libraries","library","notes","npm","npm-package","postit","react","reactjs","typescript"],"created_at":"2024-09-30T16:09:26.776Z","updated_at":"2025-11-19T06:05:04.002Z","avatar_url":"https://github.com/nicolasAguero99.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Post it Library\n\nPost 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.\n\n\u003cbr\u003e\n\n![post-it-library-preview](media/preview-post-it-library.gif)\n\n## Installation\n\nTo install Post It library:\n\n```bash\n  npm install post-it-react\n```\n\n## Page\n\n[URL Page](https://post-it-library.vercel.app/)\n\n## Single post it example \n\n```tsx\nimport PostIt from 'post-it-react'\n\nfunction App () {\n  return \u003cPostIt id={'unique-id'} position={{ x: 316, y: 212 }} text={'Hi, Im a post it! 🧉'} action={'copy'} fill={'#FEE440'} /\u003e\n}\n```\n\n## List post it example \n\n```tsx\nimport { useState, useEffect } from 'react'\nimport PostIt from 'post-it-react'\n\nexport default function App () {\n  const [postItList, setPostItList] = useState([])\n\n  useEffect(() =\u003e {\n    const clickEvent = (e: MouseEvent) =\u003e {\n      const isPostIt = (e.target as HTMLElement).classList.contains('post-it')\n      if (isPostIt) return\n      const postItData = {\n        id: crypto.randomUUID(),\n        position: { x: e.clientX, y: e.clientY },\n        text: '',\n        fill: '#FEE440'\n      }\n      setPostItList([...postItList, { ...postItData }])\n    }\n    window.addEventListener('dblclick', clickEvent)\n    return () =\u003e window.removeEventListener('dblclick', clickEvent)\n  }, [postItList])\n\n\n  return (\n    \u003c\u003e\n      {\n        postItList.length \u003e 0 \u0026\u0026 postItList.map(({ id, position, text, fill }) =\u003e (\n          \u003cPostIt key={id} postItListState={[postItList, setPostItList]} id={id} position={position} text={text} fill={fill} action={'delete'} /\u003e\n        ))\n      }\n    \u003c/\u003e\n  )\n}\n```\n\n## Table of props\n\n| Prop | Type     | Description | Default | Examples                |\n| :-------- | :------- | :------- | :------- | :------------------------- |\n| id   | `T` | Set Id unique for post it | - | \u003cul\u003e\u003cli\u003e**Number**: 12345\u003c/li\u003e\u003cli\u003e**String**: post-it-id-1\u003c/li\u003e\u003cli\u003eOther values...\u003c/li\u003e\u003c/ul\u003e|\n| position   | `{ x: number, y: number }` | Set coords (x/y) for post it position | - | { x: 212, y: 316 } |\n| text   | `string` | Set text for post it | \"\" | Hi, I'm a post it! 🧉 |\n| className?   | `string` | Set Css class for post it | post-it-classic | post-it-class |\n| fill?   | `string` | Set the background-color of post it | yellow | \u003cul\u003e\u003cli\u003e**ColorName**: yellow\u003c/li\u003e\u003cli\u003e**Hex**: #EFE9AE\u003c/li\u003e\u003c/ul\u003e |\n| color?   | `string` | Set the text color of post it | black | \u003cul\u003e\u003cli\u003e**ColorName**: black\u003c/li\u003e\u003cli\u003e**Hex**: #000000\u003c/li\u003e\u003c/ul\u003e |\n| opacity?   | `number` | Set the opacity of post it (from 0 to 1) | `1` | `0 to 1` |\n| rounded?   | `number` | Set the border-radius of post it | `0` | `30` |\n| hidden?   | `boolean` | Set the display: hidden for post it if true | `false` | \u003cul\u003e\u003cli\u003eTrue\u003c/li\u003e\u003cli\u003eFalse\u003c/li\u003e\u003c/ul\u003e \nfont? | `[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 | [\"\", \"\", \"\"] | \u003cul\u003e\u003cli\u003e['2em', 'bold', '\"Inter\", sans-serif']\u003c/li\u003e\u003cli\u003e[18, 600, '\"Inter\", sans-serif']\u003c/li\u003e\u003cli\u003e[18, '', '']\u003c/li\u003e\u003c/ul\u003e\n| postItListState?   | `[T[], React.Dispatch\u003cReact.SetStateAction\u003cT[]\u003e\u003e]` | 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())_ |\n| styleBentCorner?   | `boolean` | Set the preset style (styleBentCorner) for post it if true | `false` | \u003cul\u003e\u003cli\u003eTrue\u003c/li\u003e\u003cli\u003eFalse\u003c/li\u003e\u003c/ul\u003e  |\n| stylePinned?   | `boolean` | Set the preset style (stylePinned) for post it if true | `false` | \u003cul\u003e\u003cli\u003eTrue\u003c/li\u003e\u003cli\u003eFalse\u003c/li\u003e\u003c/ul\u003e  |\n| customPlaceholder?   | `string / string[]` | Set one or more placeholders for post it. (If it is an array, each value will be set randomly) | Write something... | \u003cul\u003e\u003cli\u003e**String**: Write something... \u003c/li\u003e\u003cli\u003e**Array**: ['Write here', 'Type something', 'I'm thinking about...']\u003c/li\u003e\u003c/ul\u003e  |\n| customDefaultText?   | `string` | Set a initial default text for post it | \"\" | Default text example |\n| action?   |  `none / copy / delete / block / [JSX.Element, ((...args: T[]) =\u003e T), string / null, React.CSSProperties?]` | Set a action button with onClick function for post it. \u003cbr\u003e - **none**: -. \u003cbr\u003e - **copy**: copy (clipboard) the current text of post it. \u003cbr\u003e - **delete**: delete the post it. \u003cbr\u003e - **block**: block the drag functionality of post it. \u003cbr\u003e - **custom**: [Jsx.Element, function, class, style] | none | \u003cul\u003e\u003cli\u003enone\u003c/li\u003e\u003cli\u003ecopy\u003c/li\u003e\u003cli\u003edelete\u003c/li\u003e\u003cli\u003eblock\u003c/li\u003e\u003cli\u003e[\u0026lt;span\u0026gt;❗\u0026lt;/span\u0026gt;, handleShowInfo, action-class, { fill: '#EFE9AE' }]\u003c/li\u003e\u003c/ul\u003e |\n| actionFixed?   | `boolean` | Set the action button to always be visible | `false` | \u003cul\u003e\u003cli\u003eTrue\u003c/li\u003e\u003cli\u003eFalse\u003c/li\u003e\u003c/ul\u003e  |\n| disableEditPostIt?   | `boolean` | Disable the edit functionality of post it if true | `false` |  \u003cul\u003e\u003cli\u003eTrue\u003c/li\u003e\u003cli\u003eFalse\u003c/li\u003e\u003c/ul\u003e  |\n| disableDeletePostIt?   | `boolean` | Disable the delete functionality of post it if true | `false` |  \u003cul\u003e\u003cli\u003eTrue\u003c/li\u003e\u003cli\u003eFalse\u003c/li\u003e\u003c/ul\u003e  |\n| disableDragPostIt?   | `boolean` | Disable the drag functionality of post it if true | `false` |  \u003cul\u003e\u003cli\u003eTrue\u003c/li\u003e\u003cli\u003eFalse\u003c/li\u003e\u003c/ul\u003e  |\n\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicolasaguero99%2Fpost-it-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicolasaguero99%2Fpost-it-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicolasaguero99%2Fpost-it-library/lists"}