2022-01-28 16:03:06 +01:00
|
|
|
import { useEffect } from 'react';
|
2022-01-28 16:42:02 +01:00
|
|
|
import debounce from 'util/debounce';
|
2022-01-28 16:03:06 +01:00
|
|
|
|
|
|
|
export function useOnResize(cb) {
|
2022-01-31 13:34:44 +01:00
|
|
|
const isWindowClient = typeof window === 'object';
|
|
|
|
|
2022-01-28 16:03:06 +01:00
|
|
|
useEffect(() => {
|
2022-01-28 16:42:02 +01:00
|
|
|
const handleResize = debounce(cb, 100);
|
2022-01-28 16:03:06 +01:00
|
|
|
|
2022-01-31 13:34:44 +01:00
|
|
|
if (isWindowClient) {
|
|
|
|
window.addEventListener('resize', handleResize);
|
2022-01-28 16:03:06 +01:00
|
|
|
|
2022-01-31 13:34:44 +01:00
|
|
|
handleResize();
|
2022-01-28 16:03:06 +01:00
|
|
|
|
2022-01-31 13:34:44 +01:00
|
|
|
return () => window.removeEventListener('resize', handleResize);
|
|
|
|
}
|
2022-07-06 14:36:14 +02:00
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
2022-01-31 13:34:44 +01:00
|
|
|
}, [isWindowClient]);
|
2022-01-28 16:03:06 +01:00
|
|
|
}
|