useDragScroll
Adds horizontal drag scrolling with momentum
1kb minified + gzipped, no dependencies
Usage
yarn add use-drag-scroll
or npm i use-drag-scroll
Basic
! The wrapping element must have overflow-x: scroll
and white-space: nowrap
.
Simple JSX setup:
const Component = { const ref = return <div className='items' ref=ref> <div className='item'></div> <div className='item'></div> <div className='item'></div> </div> }
Dynamic children
If the components within .items
can change or be dynamically added/removed, pass reliants to useDragScroll
like you would useEffect
:
const Component = { const ref = const myFilter setMyFilter = return <div className='items' ref=ref> <div className='item'></div> <div className='item'></div> <div className='item'></div> </div> }
Momentum velocity
You can also alter the momentum velocity (recommended between 0.8-1.0, default 0.9):
const Component = { const ref = const myFilter setMyFilter = return <div className='items' ref=ref> <div className='item'></div> <div className='item'></div> <div className='item'></div> </div> }
Arguments & Return values
Args
Returns
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.
const hasSwiped = return <div className='items' ref=ref> <a className='item' href='...' onClick= { if hasSwiped e }></a> </div>
Adapted from @toddwebdev's codepen here: https://codepen.io/loxks/pen/KKpVvVW