Kevin Powell - Community•2y ago

How use swap slider or fix TS error?

/*
To use this hook paste code below where you want use slider into parameters
e.g <div className='flex overflow-hidden' onMouseDown={onMouseTouchDown} ...></div>
        onMouseDown={onMouseTouchDown}
        onTouchStart={onMouseTouchDown}
        onMouseMove={move}
        onTouchMove={move}
*/

import { useEffect, useState } from "react"

export function useSlider() {
  const [isDown, setDown] = useState(false)
  const [startX, setX] = useState(0)
  const [scrollLeft, setScrollLeft] = useState(0)

  function onMouseTouchDown(e: React.SyntheticEvent<HTMLDivElement>) {
    e.preventDefault()
    setDown(true)

    if (e.changedTouches) {
      setX(e.changedTouches[0].pageX - e.currentTarget.offsetLeft)
    } else {
      setX(e.pageX - e.currentTarget.offsetLeft)
    }

    setScrollLeft(e.currentTarget.scrollLeft)
  }

  function move(e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) {
    if (!isDown) return
    let x: number
    if (e.changedTouches) {
      x = e.changedTouches[0].pageX - e.currentTarget.offsetLeft
    } else {
      x = e.pageX - e.currentTarget.offsetLeft
    }

    const speed = 1
    const walk = (x - startX) * speed
    e.currentTarget.scrollLeft = scrollLeft - walk
  }

  useEffect(() => {
    function handleUp() {
      setDown(false)
    }
    window.addEventListener("mouseup", handleUp)
    window.addEventListener("dragend", handleUp)
    return () => {
      window.removeEventListener("mouseup", handleUp)
      window.removeEventListener("dragend", handleUp)
    }
  }, [])
  return { onMouseTouchDown, move }
}

/*
To use this hook paste code below where you want use slider into parameters
e.g <div className='flex overflow-hidden' onMouseDown={onMouseTouchDown} ...></div>
        onMouseDown={onMouseTouchDown}
        onTouchStart={onMouseTouchDown}
        onMouseMove={move}
        onTouchMove={move}
*/

import { useEffect, useState } from "react"

export function useSlider() {
  const [isDown, setDown] = useState(false)
  const [startX, setX] = useState(0)
  const [scrollLeft, setScrollLeft] = useState(0)

  function onMouseTouchDown(e: React.SyntheticEvent<HTMLDivElement>) {
    e.preventDefault()
    setDown(true)

    if (e.changedTouches) {
      setX(e.changedTouches[0].pageX - e.currentTarget.offsetLeft)
    } else {
      setX(e.pageX - e.currentTarget.offsetLeft)
    }

    setScrollLeft(e.currentTarget.scrollLeft)
  }

  function move(e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) {
    if (!isDown) return
    let x: number
    if (e.changedTouches) {
      x = e.changedTouches[0].pageX - e.currentTarget.offsetLeft
    } else {
      x = e.pageX - e.currentTarget.offsetLeft
    }

    const speed = 1
    const walk = (x - startX) * speed
    e.currentTarget.scrollLeft = scrollLeft - walk
  }

  useEffect(() => {
    function handleUp() {
      setDown(false)
    }
    window.addEventListener("mouseup", handleUp)
    window.addEventListener("dragend", handleUp)
    return () => {
      window.removeEventListener("mouseup", handleUp)
      window.removeEventListener("dragend", handleUp)
    }
  }, [])
  return { onMouseTouchDown, move }
}

I have this code and I want make slider - you can swap using your cursor or finger Question: How fix this or recommend me some dependency using which I can achieve what I want

6 Replies

dys 🐙•2y ago

Maybe if(e instanceof TouchEvent && e.changedTouches)?

Jochem•2y ago

if I'm assuming correctly, that generic argument will make any event an instance of HTMLDevElement, which will never be a TouchEvent, so you'd also have to change React.MouseEvent<HTMLDivElement> to React.MouseEvent<MouseEvent|TouchEvent> I might be very wrong though, I have zero React experience

NikitaOP•2y ago

function move(e: React.MouseEvent<MouseEvent | TouchEvent> | React.MouseEvent<MouseEvent | TouchEvent>) {
    if (!isDown) return
    let x: number
    if (e.changedTouches) {
      x = e.changedTouches[0].pageX - e.currentTarget.offsetLeft
    } else {
      x = e.pageX - e.currentTarget.offsetLeft
    }

    const speed = 1
    const walk = (x - startX) * speed
    e.currentTarget.scrollLeft = scrollLeft - walk
  }

function move(e: React.MouseEvent<MouseEvent | TouchEvent> | React.MouseEvent<MouseEvent | TouchEvent>) {
    if (!isDown) return
    let x: number
    if (e.changedTouches) {
      x = e.changedTouches[0].pageX - e.currentTarget.offsetLeft
    } else {
      x = e.pageX - e.currentTarget.offsetLeft
    }

    const speed = 1
    const walk = (x - startX) * speed
    e.currentTarget.scrollLeft = scrollLeft - walk
  }

NikitaOP•2y ago

How fix it?

Jochem•2y ago

try what dys suggested also, maybe change the function signature to

function move(e: React.MouseEvent<MouseEvent> | React.TouchEvent<TouchEvent>) {

function move(e: React.MouseEvent<MouseEvent> | React.TouchEvent<TouchEvent>) {

cause what you have now seems to be a bit redundant

NikitaOP•2y ago

fixed

 function handleMouseDown(e: React.MouseEvent<HTMLDivElement>) {
    setDown(true)
    setX(e.pageX - e.currentTarget.offsetLeft)
    setScrollLeft(e.currentTarget.scrollLeft)
  }
  function handleTouchDown(e: React.TouchEvent<HTMLDivElement>) {
    setDown(true)
    setX(e.changedTouches[0].pageX - e.currentTarget.offsetLeft)
    setScrollLeft(e.currentTarget.scrollLeft)
  }

  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
    if (!isDown) return
    const x = e.pageX - e.currentTarget.offsetLeft
    const speed = 1
    const walk = (x - startX) * speed
    e.currentTarget.scrollLeft = scrollLeft - walk
  }
  function handleTouchMove(e: React.TouchEvent<HTMLDivElement>) {
    if (!isDown) return
    const x = e.changedTouches[0].pageX - e.currentTarget.offsetLeft
    const speed = 1
    const walk = (x - startX) * speed
    e.currentTarget.scrollLeft = scrollLeft - walk
  }

 function handleMouseDown(e: React.MouseEvent<HTMLDivElement>) {
    setDown(true)
    setX(e.pageX - e.currentTarget.offsetLeft)
    setScrollLeft(e.currentTarget.scrollLeft)
  }
  function handleTouchDown(e: React.TouchEvent<HTMLDivElement>) {
    setDown(true)
    setX(e.changedTouches[0].pageX - e.currentTarget.offsetLeft)
    setScrollLeft(e.currentTarget.scrollLeft)
  }

  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
    if (!isDown) return
    const x = e.pageX - e.currentTarget.offsetLeft
    const speed = 1
    const walk = (x - startX) * speed
    e.currentTarget.scrollLeft = scrollLeft - walk
  }
  function handleTouchMove(e: React.TouchEvent<HTMLDivElement>) {
    if (!isDown) return
    const x = e.changedTouches[0].pageX - e.currentTarget.offsetLeft
    const speed = 1
    const walk = (x - startX) * speed
    e.currentTarget.scrollLeft = scrollLeft - walk
  }

Gaming

Programming

How use swap slider or fix TS error?