Make a horizontal `ScrollView` draggable with a mouse (`react-native-web`)

readme.md

ScrollViews with react-native-web let mobile devices drag to scroll, and let you use your mac trackpad on desktop.

For horizontal scrollable content, such as carousels, I often find myself wanting to drag with my mouse.

This gist provides a simple hook that makes your ScrollView draggable with a mouse.

It hasn't been tested with pagingEnabled on FlatLists, but it should work for normal a FlatList on web.

Here's an example video.

Warning

This won't work with react@17 because it uses findNodeHandle. Maybe try it without that and see if it still works? I haven't tried yet.

DraggableScrollView.tsx

import React, { ComponentProps } from 'react'
import { ScrollView } from 'react-native'
import { useDraggableScroll } from './use-draggable-scroll'

export const DraggableScrollView = React.forwardRef<
  ScrollView,
  ComponentProps<typeof ScrollView>
>(function DraggableScrollView(props, ref) {
  const { refs } = useDraggableScroll<ScrollView>({
    outerRef: ref,
    cursor: 'grab', // optional, default
  })

  return <ScrollView ref={refs} horizontal {...props} />
})

use-draggable-scroll.ts

import { RefObject, useEffect, useRef, useMemo } from 'react'
import { Platform, findNodeHandle } from 'react-native'
import type { ScrollView } from 'react-native'
import mergeRefs from 'react-merge-refs'

type Props<Scrollable extends ScrollView = ScrollView> = {
  cursor?: string
  outerRef?: RefObject<Scrollable>
}

export function useDraggableScroll<Scrollable extends ScrollView = ScrollView>({
  outerRef,
  cursor = 'grab',
}: Props<Scrollable> = {}) {
  const ref = useRef<Scrollable>(null)

  useEffect(
    function listeners() {
      if (Platform.OS !== 'web' || !ref.current) {
        return
      }
      const slider = (findNodeHandle(ref.current) as unknown) as HTMLDivElement
      if (!slider) {
        return
      }
      let isDragging = false
      let startX = 0
      let scrollLeft = 0

      const mouseDown = (e: MouseEvent) => {
        isDragging = true
        startX = e.pageX - slider.offsetLeft
        scrollLeft = slider.scrollLeft

        slider.style.cursor = cursor
      }
      const mouseLeave = () => {
        isDragging = false
      }

      const mouseUp = () => {
        isDragging = false
        slider.style.cursor = 'default'
      }

      const mouseMove = (e: MouseEvent) => {
        if (!isDragging) return
        e.preventDefault()
        const x = e.pageX - slider.offsetLeft
        const walk = x - startX
        slider.scrollLeft = scrollLeft - walk
      }

      slider.addEventListener('mousedown', mouseDown)
      slider.addEventListener('mouseleave', mouseLeave)
      slider.addEventListener('mouseup', mouseUp)
      slider.addEventListener('mousemove', mouseMove)

      return () => {
        slider.removeEventListener('mousedown', mouseDown)
        slider.removeEventListener('mouseleave', mouseLeave)
        slider.removeEventListener('mouseup', mouseUp)
        slider.removeEventListener('mousemove', mouseMove)
      }
    },
    [cursor]
  )

  const refs = useMemo(() => mergeRefs(outerRef ? [ref, outerRef] : [ref]), [
    ref,
    outerRef,
  ])

  return {
    refs,
  }
}

Is the end result is in .ts file or I can also add this code in .js file?

It is Typescript syntax and won't work in JS. But if you remove the types, all should be good!

Sweet 🚀