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 }
}
6 Replies
Maybe
if(e instanceof TouchEvent && e.changedTouches)
?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 experiencefunction 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
}
How fix it?
try what dys suggested
also, maybe change the function signature to
cause what you have now seems to be a bit redundant
function move(e: React.MouseEvent<MouseEvent> | React.TouchEvent<TouchEvent>) {
function move(e: React.MouseEvent<MouseEvent> | React.TouchEvent<TouchEvent>) {
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
}