You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.1 KiB
37 lines
1.1 KiB
2 years ago
|
import { useEffect } from 'react'
|
||
|
|
||
|
// Got from https://usehooks.com/useLockBodyScroll/
|
||
|
export function useLockBodyScroll() {
|
||
|
useEffect(() => {
|
||
|
// Get original body overflow
|
||
|
const originalStyle = window.getComputedStyle(document.body).overflow
|
||
|
|
||
|
// Prevent scrolling on mount
|
||
|
document.body.style.overflow = 'hidden'
|
||
|
|
||
|
// Re-enable scrolling when component unmounts
|
||
|
return () => (document.body.style.overflow = originalStyle)
|
||
|
}, []) // Empty array ensures effect is only run on mount and unmount
|
||
|
}
|
||
|
|
||
|
export function useOnClickOutside(ref, handler) {
|
||
|
useEffect(() => {
|
||
|
const listener = (event) => {
|
||
|
// Do nothing if clicking ref's element or descendent elements
|
||
|
if (!ref.current || ref.current.contains(event.target)) {
|
||
|
return
|
||
|
}
|
||
|
|
||
|
handler(event)
|
||
|
}
|
||
|
|
||
|
document.addEventListener('mousedown', listener)
|
||
|
document.addEventListener('touchstart', listener)
|
||
|
|
||
|
return () => {
|
||
|
document.removeEventListener('mousedown', listener)
|
||
|
document.removeEventListener('touchstart', listener)
|
||
|
}
|
||
|
}, [ref, handler])
|
||
|
}
|