Files
frontend-app-learning/src/tabs/useWindowSize.js
Adam Butterworth a0839f0a63 Mobile layout for breadcrumbs and tabs (#26)
TNL-7072 mobile layout updates. Breadcrumbs truncate section and subsection titles with ellipsis. Tabs that would overflow are tucked under a "more" dropdown.
2020-03-11 09:37:54 -04:00

27 lines
632 B
JavaScript

import { useState, useEffect } from 'react';
export default function useWindowSize() {
const isClient = typeof global === 'object';
const getSize = () => ({
width: isClient ? global.innerWidth : undefined,
height: isClient ? global.innerHeight : undefined,
});
const [windowSize, setWindowSize] = useState(getSize);
useEffect(() => {
if (!isClient) {
return false;
}
const handleResize = () => {
setWindowSize(getSize());
};
global.addEventListener('resize', handleResize);
return () => global.removeEventListener('resize', handleResize);
}, []);
return windowSize;
}