Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 1x 1x 1x 1x 1x 2x 2x 2x 2x 1x 1x | import { useEffect, RefObject, useState } from "react"
import throttle from "lodash/throttle"
export const useTriggerWhenClickOutside = (
container: RefObject<HTMLElement>,
active: boolean,
trigger: (arg0: boolean) => void
) => {
useEffect(() => {
if (!active) return
const handleClick = (e: MouseEvent) => {
if (container && !container.current?.contains(e.target as Node)) {
trigger(false)
}
}
document.addEventListener("mousedown", handleClick)
return () => {
document.removeEventListener("mousedown", handleClick)
}
}, [active])
}
export enum ScrollDirection {
Up = "up",
Down = "down",
}
export const useScrollDirection = () => {
let lastScrollY = window.pageYOffset
const [direction, setDirection] = useState<null | ScrollDirection>(null)
useEffect(() => {
const updateDirection = () => {
const scrollY = window.pageYOffset
setDirection(
scrollY > lastScrollY
? ScrollDirection.Down
: ScrollDirection.Up
)
lastScrollY = scrollY
}
const updateDirectionThrottled = throttle(() => {
updateDirection()
}, 500)
document.addEventListener("scroll", updateDirectionThrottled)
return () => {
document.removeEventListener("scroll", updateDirectionThrottled)
}
})
return direction
}
|