3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-01 07:49:43 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(theme-common): allow optional desktopBreakpoint param in useWindowSize (#9335)

Browse source 
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
This commit is contained in:
Janessa Garrow 2023-12-01 11:40:27 -05:00 • committed by GitHub
parent b40524fe5f
commit 209b035399
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

21
packages/docusaurus-theme-common/src/hooks/useWindowSize.ts
View file

@ -17,15 +17,20 @@ const windowSizes = {
type WindowSize = keyof typeof windowSizes;
const DesktopThresholdWidth = 996;
// Note: this value is also hardcoded in Infima
// Both JS and CSS must have the same value
// Updating this JS value alone is not enough
// See https://github.com/facebook/docusaurus/issues/9603
const DesktopBreakpoint = 996;
function getWindowSize() {
function getWindowSize(desktopBreakpoint: number): WindowSize {
if (!ExecutionEnvironment.canUseDOM) {
throw new Error(
'getWindowSize() should only be called after React hydration',
);
}
return window.innerWidth > DesktopThresholdWidth
return window.innerWidth > desktopBreakpoint
? windowSizes.desktop
: windowSizes.mobile;
}
@ -40,7 +45,11 @@ function getWindowSize() {
* with mediaquery). We don't return `undefined` on purpose, to make it more
* explicit.
*/
export function useWindowSize(): WindowSize {
export function useWindowSize({
desktopBreakpoint = DesktopBreakpoint,
}: {
desktopBreakpoint?: number;
} = {}): WindowSize {
const [windowSize, setWindowSize] = useState<WindowSize>(
() =>
// super important to return a constant value to avoid hydration mismatch
@ -50,7 +59,7 @@ export function useWindowSize(): WindowSize {
useEffect(() => {
function updateWindowSize() {
setWindowSize(getWindowSize());
setWindowSize(getWindowSize(desktopBreakpoint));
}
updateWindowSize();
@ -60,7 +69,7 @@ export function useWindowSize(): WindowSize {
return () => {
window.removeEventListener('resize', updateWindowSize);
};
}, []);
}, [desktopBreakpoint]);
return windowSize;
}