{"_id":"@badasukerubin/react-simple-drag-selection","_rev":"7-fa60afef329638ddef91c311d16136a6","name":"@badasukerubin/react-simple-drag-selection","dist-tags":{"latest":"1.4.0"},"versions":{"0.0.8":{"name":"@badasukerubin/react-simple-drag-selection","version":"0.0.8","author":{"name":"Toluwani Adewale"},"license":"ISC","_id":"@badasukerubin/react-simple-drag-selection@0.0.8","maintainers":[{"name":"badasukerubin","email":"adewaletoluwani@yahoo.com"}],"dist":{"shasum":"dae72ce42ea1faffc3e27a845bcf913e2710c05d","tarball":"https://registry.npmjs.org/@badasukerubin/react-simple-drag-selection/-/react-simple-drag-selection-0.0.8.tgz","fileCount":34,"integrity":"sha512-PLlQ6xt6vogUtBZ4BlWz6T9rlH5pyzD1i2Q1W+NkNcmdMXVFZmVb4Vs76gfyybdighVHHTx0ZzRVA9/QHXcchw==","signatures":[{"sig":"MEQCIEJbaPKccS1u9rDji4QhIia0HVmv1iReMTr/64idOeCzAiAgCXELR+IZZ+t2EQM1y+agbWHUIbiyupcTORZ1Cyt78Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80439},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","gitHead":"29a5d78fa1d206e2685053d446cad8e161779b6a","scripts":{"rollup":"rollup -c"},"_npmUser":{"name":"badasukerubin","email":"adewaletoluwani@yahoo.com"},"_npmVersion":"9.8.0","description":"A react library that provides an efficient and effective drag selection logic.","directories":{},"_nodeVersion":"16.15.1","publishConfig":{"registry":"https://npm.pkg.github.com/badasukerubin"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.2","rollup":"^4.17.2","typescript":"^5.4.5","@types/react":"^18.3.1","rollup-plugin-dts":"^6.1.0","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.6","@rollup/plugin-node-resolve":"^15.2.3"},"peerDependencies":{"react":"16 - 18"},"_npmOperationalInternal":{"tmp":"tmp/react-simple-drag-selection_0.0.8_1715347912464_0.272084342579205","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@badasukerubin/react-simple-drag-selection","version":"1.0.2","author":{"name":"Toluwani Adewale"},"license":"MIT","_id":"@badasukerubin/react-simple-drag-selection@1.0.2","maintainers":[{"name":"badasukerubin","email":"adewaletoluwani@yahoo.com"}],"dist":{"shasum":"4b8b82488d2bae9f134f3943d0620790d199d0d7","tarball":"https://registry.npmjs.org/@badasukerubin/react-simple-drag-selection/-/react-simple-drag-selection-1.0.2.tgz","fileCount":2,"integrity":"sha512-RZyXQExJMfhfgwZB5EMHx6iELzhYVDUWB7uliAbtVlFpIK+/+6hoWZ1reC9q36siWvduOvzitGu4ZsRTlAvweQ==","signatures":[{"sig":"MEYCIQC9juemCaxlkBRBnX4G4qAW/Jhcl+DtsGFoNiO3oGmmzQIhAKYgnVkvfGwEMbM7eajfJup+xDiNpZkd76k+1QCvHH+J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3892},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","gitHead":"5690785e46e16a441d1c9ac7fd4ce5a0232cf24d","scripts":{"rollup":"rollup -c","rollup-watch":"rollup -c -w"},"_npmUser":{"name":"badasukerubin","email":"adewaletoluwani@yahoo.com"},"_npmVersion":"10.5.2","description":"A react library that provides an efficient and effective drag selection logic.","directories":{},"_nodeVersion":"20.13.1","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.2","rollup":"^4.17.2","typescript":"^5.4.5","@types/react":"^18.3.1","rollup-plugin-dts":"^6.1.0","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.6","@rollup/plugin-node-resolve":"^15.2.3"},"peerDependencies":{"react":"16 - 18"},"_npmOperationalInternal":{"tmp":"tmp/react-simple-drag-selection_1.0.2_1716222036918_0.41862170494102835","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@badasukerubin/react-simple-drag-selection","version":"1.1.0","keywords":["react","drag","selection","drag-selection","react-drag-selection","react-simple-drag-selection"],"author":{"name":"Toluwani Adewale"},"license":"MIT","_id":"@badasukerubin/react-simple-drag-selection@1.1.0","maintainers":[{"name":"badasukerubin","email":"adewaletoluwani@yahoo.com"}],"homepage":"https://github.com/badasukerubin/react-simple-drag-selection#readme","bugs":{"url":"https://github.com/badasukerubin/react-simple-drag-selection/issues"},"dist":{"shasum":"e3f362eca9208c5908fe1443e8afdf9d6c3abcec","tarball":"https://registry.npmjs.org/@badasukerubin/react-simple-drag-selection/-/react-simple-drag-selection-1.1.0.tgz","fileCount":2,"integrity":"sha512-bcmYJMn9r5afwehVdoGZI5k1/TCzDOP49W8QkMloEzCl2/aXKBtsriRmVjNEMJCjt9RH+bMBkOPplwAkrhATTg==","signatures":[{"sig":"MEUCICf1sOYapf6cF46e5I4wutVCu7uoK2OH6cLpIGowxXkAAiEAnLkeH4zJsAUg98fFyVC1xctLVpDjyQ0scFL2nBAQrG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4758},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","gitHead":"01965c645b73209a23344f5bd87d6e7bcc983320","scripts":{"rollup":"rollup -c","rollup-watch":"rollup -c -w"},"_npmUser":{"name":"badasukerubin","email":"adewaletoluwani@yahoo.com"},"repository":{"url":"git+https://github.com/badasukerubin/react-simple-drag-selection.git","type":"git"},"_npmVersion":"10.5.2","description":"A react library that provides an efficient and effective drag selection logic.","directories":{},"_nodeVersion":"20.13.1","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.2","rollup":"^4.17.2","typescript":"^5.4.5","@types/react":"^18.3.1","rollup-plugin-dts":"^6.1.0","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.6","@rollup/plugin-node-resolve":"^15.2.3"},"peerDependencies":{"react":"16 - 18"},"_npmOperationalInternal":{"tmp":"tmp/react-simple-drag-selection_1.1.0_1716225065343_0.4268544941853689","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@badasukerubin/react-simple-drag-selection","version":"1.1.1","keywords":["react","drag","selection","drag-selection","react-drag-selection","react-simple-drag-selection"],"author":{"name":"Toluwani Adewale"},"license":"MIT","_id":"@badasukerubin/react-simple-drag-selection@1.1.1","maintainers":[{"name":"badasukerubin","email":"adewaletoluwani@yahoo.com"}],"homepage":"https://github.com/badasukerubin/react-simple-drag-selection#readme","bugs":{"url":"https://github.com/badasukerubin/react-simple-drag-selection/issues"},"dist":{"shasum":"4f06e3d5def85301c04f9fc7b4d0df20fabdd3cd","tarball":"https://registry.npmjs.org/@badasukerubin/react-simple-drag-selection/-/react-simple-drag-selection-1.1.1.tgz","fileCount":35,"integrity":"sha512-D+yx9JqyUMFBtPTr3oPhuMj1L7/rv839aMK9R3DXZieIOX5VjyXIB7jhc9lFh0cfddQsNrphqFqu+yEWNIEstQ==","signatures":[{"sig":"MEQCIDibOuRHdOmOXO4Dd+op2gTOE+sOrxJx9rdLI1BahiwbAiBi0SQ/yETZHMvAQgvLti+RJ2ElwO5ZNMENGRB/T4UfvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":69588},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","gitHead":"b88320a8fa71f0a42694fbc8ece0140ccb50839d","scripts":{"rollup":"rollup -c","rollup-watch":"rollup -c -w"},"_npmUser":{"name":"badasukerubin","email":"adewaletoluwani@yahoo.com"},"repository":{"url":"git+https://github.com/badasukerubin/react-simple-drag-selection.git","type":"git"},"_npmVersion":"10.5.2","description":"A react library that provides an efficient and effective drag selection logic.","directories":{},"_nodeVersion":"20.13.1","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.2","rollup":"^4.17.2","typescript":"^5.4.5","@types/react":"^18.3.1","rollup-plugin-dts":"^6.1.0","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.6","@rollup/plugin-node-resolve":"^15.2.3"},"peerDependencies":{"react":"16 - 18"},"_npmOperationalInternal":{"tmp":"tmp/react-simple-drag-selection_1.1.1_1716240860404_0.8393098604577014","host":"s3://npm-registry-packages"}},"1.2.0":{"name":"@badasukerubin/react-simple-drag-selection","version":"1.2.0","keywords":["react","drag","selection","drag-selection","react-drag-selection","react-simple-drag-selection"],"author":{"name":"Toluwani Adewale"},"license":"MIT","_id":"@badasukerubin/react-simple-drag-selection@1.2.0","maintainers":[{"name":"badasukerubin","email":"adewaletoluwani@yahoo.com"}],"homepage":"https://github.com/badasukerubin/react-simple-drag-selection#readme","bugs":{"url":"https://github.com/badasukerubin/react-simple-drag-selection/issues"},"dist":{"shasum":"d098f6daf710c3af8131a3570a2a6aba00acbd41","tarball":"https://registry.npmjs.org/@badasukerubin/react-simple-drag-selection/-/react-simple-drag-selection-1.2.0.tgz","fileCount":35,"integrity":"sha512-ipUt6Es8Ow3q7+UO11zVqLD50328K4VFqlbdAl4JYDvB3LPnfUZRfSfEGihlm3dX8FwIthSYrazr0FrRv0eb4Q==","signatures":[{"sig":"MEUCIQCSeKTK4j5YGAoVXj6TDdn57+owuhhDgfXyJ/7bOBuJyAIgc/0ONyt75mO9HgzSC3K82PHemMzJ0H8b34Gu0YSvhdw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":70565},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","gitHead":"b19990f13663bb714b1baa76e9568e3342d7cfcc","scripts":{"rollup":"rollup -c","rollup-watch":"rollup -c -w"},"_npmUser":{"name":"badasukerubin","email":"adewaletoluwani@yahoo.com"},"repository":{"url":"git+https://github.com/badasukerubin/react-simple-drag-selection.git","type":"git"},"_npmVersion":"10.8.2","description":"A react library that provides an efficient and effective drag selection logic.","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.2","rollup":"^4.17.2","typescript":"^5.4.5","@types/react":"^18.3.1","rollup-plugin-dts":"^6.1.0","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.6","@rollup/plugin-node-resolve":"^15.2.3"},"peerDependencies":{"react":"16 - 18"},"_npmOperationalInternal":{"tmp":"tmp/react-simple-drag-selection_1.2.0_1742069194255_0.23805473727843807","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"@badasukerubin/react-simple-drag-selection","version":"1.3.0","keywords":["react","drag","selection","drag-selection","react-drag-selection","react-simple-drag-selection"],"author":{"name":"Toluwani Adewale"},"license":"MIT","_id":"@badasukerubin/react-simple-drag-selection@1.3.0","maintainers":[{"name":"badasukerubin","email":"adewaletoluwani@yahoo.com"}],"homepage":"https://github.com/badasukerubin/react-simple-drag-selection#readme","bugs":{"url":"https://github.com/badasukerubin/react-simple-drag-selection/issues"},"dist":{"shasum":"df7596d74136d7f642704bca27c6482aba9bb084","tarball":"https://registry.npmjs.org/@badasukerubin/react-simple-drag-selection/-/react-simple-drag-selection-1.3.0.tgz","fileCount":35,"integrity":"sha512-YS8oz1hlkv6oAePOKgnQDgav5Ik+Ln/nIIPxJHPpayp/PxoeAYGBuHlW1V1JkzwQ+x05WG69LOKTmbYwdhX5Nw==","signatures":[{"sig":"MEYCIQC8bz6rnQN0PK9qREyQM43guqZfc3z3jGASzA3Z1ZRyXwIhANkQZbwh++2hhMxxoiD0Nbh4rgi6DUyxmv7mnjJctQu1","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":74052},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","gitHead":"29d516506048e43c7edd6d081e08c3d63ea0c9b4","scripts":{"rollup":"rollup -c","rollup-watch":"rollup -c -w"},"_npmUser":{"name":"badasukerubin","email":"adewaletoluwani@yahoo.com"},"repository":{"url":"git+https://github.com/badasukerubin/react-simple-drag-selection.git","type":"git"},"_npmVersion":"10.8.2","description":"A react library that provides an efficient and effective drag selection logic.","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.2","rollup":"^4.17.2","typescript":"^5.4.5","@types/react":"^18.3.1","rollup-plugin-dts":"^6.1.0","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.6","@rollup/plugin-node-resolve":"^15.2.3"},"peerDependencies":{"react":"16 - 18"},"_npmOperationalInternal":{"tmp":"tmp/react-simple-drag-selection_1.3.0_1742085379297_0.33908507732175486","host":"s3://npm-registry-packages-npm-production"}},"1.4.0":{"name":"@badasukerubin/react-simple-drag-selection","version":"1.4.0","description":"A react library that provides an efficient and effective drag selection logic.","scripts":{"rollup":"rollup -c","rollup-watch":"rollup -c -w"},"author":{"name":"Toluwani Adewale"},"license":"MIT","devDependencies":{"@rollup/plugin-commonjs":"^28.0.0","@rollup/plugin-node-resolve":"^16.0.0","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^12.1.0","@types/react":"^19.0.0","rollup":"^4.28.0","rollup-plugin-dts":"^6.1.1","tslib":"^2.8.0","typescript":"^5.7.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","keywords":["react","drag","selection","drag-selection","react-drag-selection","react-simple-drag-selection"],"repository":{"type":"git","url":"git+https://github.com/badasukerubin/react-simple-drag-selection.git"},"_id":"@badasukerubin/react-simple-drag-selection@1.4.0","gitHead":"29d516506048e43c7edd6d081e08c3d63ea0c9b4","bugs":{"url":"https://github.com/badasukerubin/react-simple-drag-selection/issues"},"homepage":"https://github.com/badasukerubin/react-simple-drag-selection#readme","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-z0jcqC6KR0T1tEYrqRNlH7UYVS8KJ0xSifGoTVdxzpvyywWOOAo2a+4MGcxeOPiZcUpgqY0w2qFeyhyopiFOkA==","shasum":"eab90b3ef0f206b0e6ca40e410d059b56d4bd5e8","tarball":"https://registry.npmjs.org/@badasukerubin/react-simple-drag-selection/-/react-simple-drag-selection-1.4.0.tgz","fileCount":21,"unpackedSize":75336,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCGoFNv7kcqBb9C5JwbtZfbMCNyRDFDTON0JP5BPPckqwIgPxmjbjrXN+uExbAxm1Q3SFLPCY7KlJA+i7mpgp/Y5FY="}]},"_npmUser":{"name":"badasukerubin","email":"adewaletoluwani@yahoo.com"},"directories":{},"maintainers":[{"name":"badasukerubin","email":"adewaletoluwani@yahoo.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-simple-drag-selection_1.4.0_1768715160517_0.018287609422630968"},"_hasShrinkwrap":false}},"time":{"created":"2024-05-10T13:31:52.368Z","modified":"2026-01-18T05:46:00.852Z","0.0.8":"2024-05-10T13:31:52.651Z","1.0.2":"2024-05-20T16:20:37.066Z","1.1.0":"2024-05-20T17:11:05.467Z","1.1.1":"2024-05-20T21:34:20.568Z","1.2.0":"2025-03-15T20:06:34.447Z","1.3.0":"2025-03-16T00:36:19.477Z","1.4.0":"2026-01-18T05:46:00.717Z"},"bugs":{"url":"https://github.com/badasukerubin/react-simple-drag-selection/issues"},"author":{"name":"Toluwani Adewale"},"license":"MIT","homepage":"https://github.com/badasukerubin/react-simple-drag-selection#readme","keywords":["react","drag","selection","drag-selection","react-drag-selection","react-simple-drag-selection"],"repository":{"type":"git","url":"git+https://github.com/badasukerubin/react-simple-drag-selection.git"},"description":"A react library that provides an efficient and effective drag selection logic.","maintainers":[{"name":"badasukerubin","email":"adewaletoluwani@yahoo.com"}],"readme":"<!-- attach gif -->\n<p align=\"center\">\n    <img src=\"https://github.com/badasukerubin/react-simple-drag-selection/blob/v1.0.2/assets/react-simple-drag-selection.gif?raw=true\" alt=\"react-simple-drag-selection\" style=\"width:900px\" />\n</p>\n\n# react-simple-drag-selection\n\nA simple and configurable React library that provides an efficient and effective drag selection logic.\n\n## Setup\n\n1. Install the repo\n\n   ```\n   npm install @badasukerubin/react-simple-drag-selection\n   ```\n\n2. Import the component, hooks and wrap your component with the `DragSelectionContext` provider\n\n   ```tsx\n   import {\n     DragSelectionContext,\n     SelectionBox,\n     useDragSelection,\n   } from \"@badasukerubin/react-simple-drag-selection\";\n\n   ...\n\n   const selectContainerRef = useRef<HTMLDivElement | null>(null);\n   const selectBoxRef = useRef<HTMLDivElement | null>(null);\n   const selection = useDragSelection({\n     containerRef: selectContainerRef,\n     boxRef: selectBoxRef,\n   });\n\n   <DragSelectionContext.Provider value={selection}>\n     <div ref={selectContainerRef} className={`overflow-${axis}`}>\n        <SelectionBox ref={selectBoxRef} />\n\n        <Boxes boxes={boxes} />\n      </div>\n   </DragSelectionContext.Provider>;\n   ```\n\n3. Use the `useDragSelected` hook to get the selection state in the component you want to use it in (Box).\n\n   ```tsx\n   import {\n     DragSelectionContext,\n     useDragSelected,\n   } from \"@badasukerubin/react-simple-drag-selection\";\n\n   ...\n\n   export default memo(function Box() {\n     const [color] = useState(getRandomColor());\n\n     const boxRef = useRef<HTMLDivElement | null>(null);\n\n     const selection = useContext(DragSelectionContext);\n     const isSelected = useDragSelected({\n        elementRef: boxRef,\n        selection\n     });\n\n     return (\n        <div\n        ref={boxRef}\n        className=\"box\"\n        style={{ backgroundColor: isSelected ? \"black\" : color }}\n        ></div>\n     );\n   });\n\n    ...\n   ```\n\n## Available props\n\n1. `DragSelectionContext` is the context provider that provides the selection state to the components that need it.\n\n2. `SelectionBox` is the selection box component that is rendered when the selection starts. You can customise this component by passing values for `className`, `style` or any other prop that you'd pass to a `div` element.\n\n3. `useDragSelection` has the following options:\n\n   - `containerRef`: React ref to the container element\n   - `boxRef`: React ref to the selection box element\n   - `mouseMoveThreshold`: Optional number that determines the distance the mouse has to move before the selection starts (current default is 5px)\n   - `onSelectionStart`: Optional callback function that is called when the selection starts\n   - `onSelection`: Optional callback function that is called when the selection changes\n   - `onSelectionEnd`: Optional callback function that is called when the selection ends\n\n4. `useDragSelected` has the following options:\n\n   - `elementRef`: React ref to the element that you want to check if it is selected\n   - `selection`: The selection object that is provided by the `DragSelectionContext`\n   - `onSelected`: Optional callback function that is called when the element is selected\n\n5. You can also ignore elements from having the selection logic interfere with their default behaviour (or that of their descendants) by adding the `ignore-drag-selection` class to them.\n\n   ```tsx\n   <div className=\"ignore-drag-selection\">\n     <div className=\"box\" draggable={true} ondragstart={dragFunction}></div>\n   </div>\n   ```\n\n## Example\n\nA full example can be found in the [example](https://github.com/badasukerubin/react-simple-drag-selection/tree/main/example) directory.\n\n## Roadmap\n\n- [ ] Unselect/Select using Shift and Meta keys\n- [ ] Add tests\n- [x] Mobile/touch selection support\n","readmeFilename":"README.md"}