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.
36 lines
1.1 KiB
36 lines
1.1 KiB
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]) |
|
}
|
|
|