35 lines
938 B
TypeScript
35 lines
938 B
TypeScript
import { useEffect, useRef, useState } from "react"
|
|
|
|
export default function useScrollShadows<T extends HTMLElement>() {
|
|
const containerRef = useRef<T>(null)
|
|
const [showLeftShadow, setShowLeftShadow] = useState<boolean>(false)
|
|
const [showRightShadow, setShowRightShadow] = useState<boolean>(false)
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const container = containerRef.current
|
|
if (!container) return
|
|
|
|
setShowLeftShadow(container.scrollLeft > 0)
|
|
setShowRightShadow(
|
|
container.scrollLeft < container.scrollWidth - container.clientWidth
|
|
)
|
|
}
|
|
|
|
const container = containerRef.current
|
|
if (container) {
|
|
container.addEventListener("scroll", handleScroll)
|
|
}
|
|
|
|
handleScroll()
|
|
|
|
return () => {
|
|
if (container) {
|
|
container.removeEventListener("scroll", handleScroll)
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
return { containerRef, showLeftShadow, showRightShadow }
|
|
}
|