useDragScroll

Adds horizontal drag scrolling with momentum

1kb minified + gzipped, no dependencies

Usage

yarn add use-drag-scroll or npm i use-drag-scroll

$3

! The wrapping element must have overflow-x: scroll and white-space: nowrap.

Simple JSX setup:
``javascript
import React, {useRef} from 'react'
import useDragScroll from 'use-drag-scroll'

const Component = () => {
const ref = useRef(null)

useDragScroll({
sliderRef: ref
})

return (



)
}
`

$3

If the components within .items can change or be dynamically added/removed, pass reliants to useDragScroll like you would useEffect:
`javascript
import React, {useRef, useState} from 'react'
import useDragScroll from 'use-drag-scroll'

const Component = () => {
const ref = useRef(null)
const [myFilter, setMyFilter] = useState('DESC')

useDragScroll({
sliderRef: ref,
reliants: [myFilter]
})

return (



)
}
`

$3

You can also alter the momentum velocity (recommended between 0.8-1.0, default 0.9):
`javascript
import React, {useRef, useState} from 'react'
import useDragScroll from 'use-drag-scroll'

const Component = () => {
const ref = useRef(null)
const [myFilter, setMyFilter] = useState('DESC')

useDragScroll({
sliderRef: ref,
reliants: [myFilter],
momentumVelocity: 0.8
})

return (



)
}
`

Arguments & Return values

$3

`javascript
useDragScroll({
sliderRef: ReactRef, // Wrapper/container ref (REQUIRED)
reliants: [...], // Array
momentumVelocity: Number
})
`

$3

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.

`javascript
const { hasSwiped } = useDragScroll({
sliderRef: ReactRef
})

return (



)
``

---

Adapted from @toddwebdev's codepen here: https://codepen.io/loxks/pen/KKpVvVW