{"_id":"@binhqd777/use-drag-scroll","_rev":"4-a6afd0ed3f63d8f026309b1ecd41b014","time":{"created":"2024-05-14T14:11:59.773Z","1.0.2":"2024-05-14T11:52:08.196Z","modified":"2024-05-14T14:23:07.103Z","1.0.3":"2024-05-14T14:12:00.161Z","1.0.4":"2024-05-14T14:23:06.920Z"},"name":"@binhqd777/use-drag-scroll","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.3":{"name":"@binhqd777/use-drag-scroll","version":"1.0.3","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/dangBinh/useDragScroll.git"},"author":{"name":"BinhQD","email":"binh@operandio.com"},"license":"MIT","scripts":{"build":"rollup -c","start":"rollup -c -w"},"peerDependencies":{"react":"^16.0.0 || ^17.0.0"},"devDependencies":{"@babel/core":"^7.9.0","@babel/preset-env":"^7.9.5","@babel/preset-react":"^7.9.4","rollup":"^2.6.1","rollup-plugin-babel":"^4.4.0"},"publishConfig":{"access":"public"},"gitHead":"b5c51ec1581773cca8980225109d8d4d44ab4d14","description":"Adds horizontal drag scrolling with momentum","bugs":{"url":"https://github.com/dangBinh/useDragScroll/issues"},"homepage":"https://github.com/dangBinh/useDragScroll#readme","_id":"@binhqd777/use-drag-scroll@1.0.3","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-IvXRkr/RgksnHOWTHpKA/3ews3+Q8jBEUDEzrkjqaDLG4tKRpmbc4YpwFlNYu2X72U9xjJXAuq5kzq/z7rVCZg==","shasum":"18ac477c049d2f73648f910a6203270001a1db72","tarball":"https://registry.npmjs.org/@binhqd777/use-drag-scroll/-/use-drag-scroll-1.0.3.tgz","fileCount":3,"unpackedSize":4659,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAlH/cCHNt35Ntx4uFf+i4sIbcyyq1+VNmeB2CbkMPTNAiA8dREmeI2c8MZpMYuHCiJL39iABIEyv35cSVT9nq9EVQ=="}]},"_npmUser":{"name":"binhqd777","email":"binhqd.fami@gmail.com"},"directories":{},"maintainers":[{"name":"binhqd777","email":"binhqd.fami@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-drag-scroll_1.0.3_1715695920017_0.1193243901202139"},"_hasShrinkwrap":false},"1.0.4":{"name":"@binhqd777/use-drag-scroll","version":"1.0.4","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/dangBinh/useDragScroll.git"},"author":{"name":"BinhQD","email":"binh@operandio.com"},"license":"MIT","scripts":{"build":"rollup -c","start":"rollup -c -w"},"peerDependencies":{"react":"^16.0.0 || ^17.0.0"},"devDependencies":{"@babel/core":"^7.9.0","@babel/preset-env":"^7.9.5","@babel/preset-react":"^7.9.4","rollup":"^2.6.1","rollup-plugin-babel":"^4.4.0"},"publishConfig":{"access":"public"},"gitHead":"eabc714f9a587735e573eeb77d52c6f6bbb3cab8","description":"Adds horizontal drag scrolling with momentum","bugs":{"url":"https://github.com/dangBinh/useDragScroll/issues"},"homepage":"https://github.com/dangBinh/useDragScroll#readme","_id":"@binhqd777/use-drag-scroll@1.0.4","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-MD1V3tPDyYV7H8JbRICpsIw7471hbzE+wnJPxBhZ8bUn2Z9e5r4UfAGRqw0xBli9aJpf9E3/ZpudqWaiB5MrSw==","shasum":"72868042e2288c8fc62fa6ec8e0f48016800bb05","tarball":"https://registry.npmjs.org/@binhqd777/use-drag-scroll/-/use-drag-scroll-1.0.4.tgz","fileCount":5,"unpackedSize":14286,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDf9vW2EV+wWHIe58frnQFrxNfPI3V90ROBGUeLDYSJKQIgftgO4pAw1q22HP16lRrZeAmwcW1LRCDiPdu+2hlCEZk="}]},"_npmUser":{"name":"binhqd777","email":"binhqd.fami@gmail.com"},"directories":{},"maintainers":[{"name":"binhqd777","email":"binhqd.fami@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-drag-scroll_1.0.4_1715696586776_0.9106473948526135"},"_hasShrinkwrap":false}},"maintainers":[{"name":"binhqd777","email":"binhqd.fami@gmail.com"}],"description":"Adds horizontal drag scrolling with momentum","homepage":"https://github.com/dangBinh/useDragScroll#readme","repository":{"type":"git","url":"git+https://github.com/dangBinh/useDragScroll.git"},"author":{"name":"BinhQD","email":"binh@operandio.com"},"bugs":{"url":"https://github.com/dangBinh/useDragScroll/issues"},"license":"MIT","readme":"# useDragScroll\nAdds horizontal drag scrolling with momentum\n\n1kb minified + gzipped, no dependencies\n\n## Usage\n\n`yarn add use-drag-scroll` or `npm i use-drag-scroll`\n\n! The wrapping element must have `overflow-x: scroll` and `white-space: nowrap`.\n\n### Basic\n\nSimple JSX setup:\n\n[Live example](https://codesandbox.io/s/usedragscroll-basic-sgkd5)\n```javascript\n import React, {useRef} from 'react'\n import useDragScroll from 'use-drag-scroll'\n\n const Component = () => {\n const ref = useRef(null)\n\n useDragScroll({\n sliderRef: ref\n })\n\n return (\n \n )\n }\n```\n\n### Dynamic children\n\nIf the components within `.items` can change or be dynamically added/removed, pass reliants to `useDragScroll` like you would `useEffect`:\n\n[Live example](https://codesandbox.io/s/usedragscroll-basic-vdxic?file=/src/App.js)\n```javascript\n import React, {useRef, useState} from 'react'\n import useDragScroll from 'use-drag-scroll'\n\n const Component = () => {\n const ref = useRef(null)\n const [myFilter, setMyFilter] = useState('DESC')\n\n useDragScroll({\n sliderRef: ref,\n reliants: [myFilter]\n })\n\n return (\n \n )\n }\n```\n\n### Momentum velocity\n\nYou can also alter the momentum velocity (recommended between 0.8-1.0, default 0.9):\n```javascript\n import React, {useRef, useState} from 'react'\n import useDragScroll from 'use-drag-scroll'\n\n const Component = () => {\n const ref = useRef(null)\n const [myFilter, setMyFilter] = useState('DESC')\n\n useDragScroll({\n sliderRef: ref,\n reliants: [myFilter],\n momentumVelocity: 0.8 \n })\n\n return (\n \n )\n }\n```\n\n## Arguments & Return values\n\n### Args\n\n```javascript\nuseDragScroll({\n sliderRef: ReactRef, // Wrapper/container ref (REQUIRED)\n reliants: [...], // Array\n momentumVelocity: Number\n})\n```\n\n### Returns\n\n`useDragScroll` returns `hasSwiped` only. This tells you if the user has moved the mouse more than 3px horizontally. It's handy for when your items are links. You can tell links to `preventDefault` if the user has scrolled previously.\n\n[Live example with links](https://codesandbox.io/s/usedragscroll-links-jpc5i)\n\n```javascript\nconst { hasSwiped } = useDragScroll({\n sliderRef: ReactRef\n})\n\nreturn (\n \n)\n```\n\n---\n\nAdapted from @toddwebdev's codepen here: https://codepen.io/loxks/pen/KKpVvVW","readmeFilename":"README.md"}