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 🐙
dys 🐙17mo ago
Maybe if(e instanceof TouchEvent && e.changedTouches)?
Jochem
Jochem17mo 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
Nikita
Nikita16mo 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
}
Nikita
Nikita16mo ago
How fix it?
Jochem
Jochem16mo 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
Nikita
Nikita16mo 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
}
Want results from more Discord servers?
Add your server