{"id":17770705,"url":"https://github.com/ajainvivek/react-stickies","last_synced_at":"2025-03-15T14:31:02.766Z","repository":{"id":17347297,"uuid":"81420117","full_name":"ajainvivek/react-stickies","owner":"ajainvivek","description":"🗒️ Sticky Notes for React Application","archived":false,"fork":false,"pushed_at":"2021-12-06T20:40:20.000Z","size":519,"stargazers_count":46,"open_issues_count":0,"forks_count":17,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-15T07:26:51.187Z","etag":null,"topics":["drag-drop-sticky-notes","react","react-stickies","react-sticky-notes","sticky-notes"],"latest_commit_sha":null,"homepage":"https://ajainvivek.github.io/react-stickies/","language":"JavaScript","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/ajainvivek.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}},"created_at":"2017-02-09T07:00:56.000Z","updated_at":"2023-08-27T05:21:12.000Z","dependencies_parsed_at":"2022-08-07T08:15:57.773Z","dependency_job_id":null,"html_url":"https://github.com/ajainvivek/react-stickies","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajainvivek%2Freact-stickies","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajainvivek%2Freact-stickies/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajainvivek%2Freact-stickies/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajainvivek%2Freact-stickies/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ajainvivek","download_url":"https://codeload.github.com/ajainvivek/react-stickies/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243742776,"owners_count":20340701,"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":["drag-drop-sticky-notes","react","react-stickies","react-sticky-notes","sticky-notes"],"created_at":"2024-10-26T21:24:50.459Z","updated_at":"2025-03-15T14:31:02.757Z","avatar_url":"https://github.com/ajainvivek.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Stickies\n\nSticky Notes for React Application (DraftJS Based)\n\n![Stickies](http://i.giphy.com/j4U83Mnt5BW7u.gif)\n\u003e Screencast of stickies\n\n## Installation\n\nInstall the React-Stickies [package](https://www.npmjs.org/package/react-stickies) package using [npm](https://www.npmjs.com/):\n\n```bash\nnpm install react-stickies --save\n```\n\nMake sure you have included draftjs styles in your app.\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.min.css\"\u003e\n```\n\n## Features\n\n* Pure React Sticky Notes\n* Draggable \u0026 Resizable Stickies\n* Inline Content Editable\n* Configurable Sticky Colors\n* Last Updated TimeStamp\n* Configurable Tape\n\n## Usage\n\n```\nimport React, { Component } from 'react';\nimport ReactStickies from 'react-stickies'; //ES6\n\nclass MyFirstStickyNotes extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n          notes: []\n        }\n        this.onChange = this.onChange.bind(this)\n        this.onSave = this.onSave.bind(this)\n      }\n      onSave () {\n        const notes = this.state.notes;\n        notes.map(note =\u003e {\n          delete note.editorState;\n        })\n       \n      }\n      onChange (notes) {\n        this.setState({\n          notes\n        })\n      }\n  render() {\n   \n    return (\n      \u003cReactStickies\n        notes={this.state.notes}\n        onChange={this.onChange}\n      /\u003e\n    )\n  }\n}\nexport default MyFirstStickyNotes;\n```\n\n### React Stickies Props\n\n```javascript\n// Tape with sticky note\ntape: ?Boolean = {true|false},\n\n// Display title on header\ntitle: ?Boolean = {true|false},\n\n// Display footer alongside updated timestamp\nfooter: ?Boolean = {true|false},\n\n// Configurable custom sticky notes colors\ncolors: ?Array = [HexCodes],\n\n// Grid configuration\ngrid: ?Object = {\n  // These are all in grid units, not pixels\n  w: number,\n  h: number,\n  minW: ?number = 0,\n  maxW: ?number = Infinity,\n  minH: ?number = 0,\n  maxH: ?number = Infinity,\n\n  // Rows have a static height, but you can change this based on breakpoints\n  // if you like.\n  rowHeight: ?number = 150,\n\n  // {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}\n  // Breakpoint names are arbitrary but must match in the cols and layouts objects.\n  breakpoints: ?Object = {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},\n\n  // # of cols. This is a breakpoint -\u003e cols map, e.g. {lg: 12, md: 10, ...}\n  cols: ?Object = {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},\n\n  // layouts is an object mapping breakpoints to layouts.\n  // e.g. {lg: Layout, md: Layout, ...}\n  layouts: {[key: $Keys\u003cbreakpoints\u003e]: Layout}\n\n  // Layout is an array of object with the format:\n  // {x: number, y: number, w: number, h: number}\n  // The index into the layout must match the key used on each item component.\n  // If you choose to use custom keys, you can specify that key in the layout\n  // array objects like so:\n  // {i: string, x: number, y: number, w: number, h: number}\n  layout: ?array = null, // If not provided, use data-grid props on children\n  //\n  // Flags\n  //\n  isDraggable: ?boolean = true,\n  isResizable: ?boolean = true,\n  // Uses CSS3 translate() instead of position top/left.\n  // This makes about 6x faster paint performance\n  useCSSTransforms: ?boolean = true,\n\n  // Callback so you can save the layout.\n  // Calls back with (currentLayout) after every drag or resize stop.\n  onLayoutChange: (layout: Layout) =\u003e void,\n\n}\n\n\n//\n// Callbacks\n//\n\n// Callback so you can save the notes.\n// Calls back when note is updated\nonChange: (Array | notes, String | state (add/update/delete) )\nonTitleChange: (String | text, Object | note)\nonAdd: (Object | note)\nonDelete: (Object | note)\n\n//\n// Styles\n//\n\n// Styles which could be modified\nwrapperStyle: (Object | {} )\nnoteStyle: (Object | {} )\nnoteStyle: (Object | {} )\nnoteHeaderStyle: (Object | {} )\nnoteBodyStyle: (Object | {} )\nnoteFooterStyle: (Object | {} )\n\n```\n\n\n## Contribute\n\nIf you have a feature request, please add it as an issue or make a pull request.\n\n## TODO List\n\n- [x] Basic Notes with CRUD\n- [x] Draggable Notes\n- [x] Update Notes state\n- [x] Notes position handling\n- [x] Resizable handles on corners\n- [ ] ---- \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajainvivek%2Freact-stickies","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fajainvivek%2Freact-stickies","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajainvivek%2Freact-stickies/lists"}