mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
328a800132
Rename useResponsiveObserve to useResponsiveObserver. Add validation of breakpoints values and test
26 lines
778 B
TypeScript
26 lines
778 B
TypeScript
import { useEffect, useRef } from 'react';
|
|
import useForceUpdate from '../../_util/hooks/useForceUpdate';
|
|
import type { ScreenMap } from '../../_util/responsiveObserver';
|
|
import useResponsiveObserver from '../../_util/responsiveObserver';
|
|
|
|
function useBreakpoint(refreshOnChange: boolean = true): ScreenMap {
|
|
const screensRef = useRef<ScreenMap>({});
|
|
const forceUpdate = useForceUpdate();
|
|
const responsiveObserver = useResponsiveObserver();
|
|
|
|
useEffect(() => {
|
|
const token = responsiveObserver.subscribe((supportScreens) => {
|
|
screensRef.current = supportScreens;
|
|
if (refreshOnChange) {
|
|
forceUpdate();
|
|
}
|
|
});
|
|
|
|
return () => responsiveObserver.unsubscribe(token);
|
|
}, []);
|
|
|
|
return screensRef.current;
|
|
}
|
|
|
|
export default useBreakpoint;
|