Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, { createContext, useState, useEffect, useContext } from 'react';
import PropTypes from 'prop-types';
export function useWindowWidth() {
const [windowSize, setWindowSize] = useState(undefined);
useEffect(() => {
function handleResize() {
setWindowSize(window.innerWidth);
}
window.addEventListener('resize', handleResize);
handleResize();
return () => window.removeEventListener('resize', handleResize);
}, []);
return windowSize;
}
export const HeaderStateContext = createContext(null);
export const HeaderStateProvider = ({
children,
RouterLink,
headerContent, // allow header content from api request available to all child components
}) => {
const [currentOpenMenu, setCurrentOpenMenu] = useState('');
const handleToggleMenu = (name) => {
if (currentOpenMenu === name) {
return setCurrentOpenMenu('');
}
return setCurrentOpenMenu(name);
};
const closeMenus = () => setCurrentOpenMenu('');
return (
<HeaderStateContext.Provider
value={{
currentOpenMenu,
handleToggleMenu,
closeMenus,
RouterLink,
headerContent,
}}
>
{children}
</HeaderStateContext.Provider>
);
};
HeaderStateProvider.propTypes = {
children: PropTypes.node.isRequired,
RouterLink: PropTypes.func,
headerContent: PropTypes.object,
};
HeaderStateProvider.defaultProps = {
RouterLink: null,
};
export const useHeaderState = () => {
const context = useContext(HeaderStateContext);
if (context === undefined) {
throw new Error('useHeaderState must be used within a HeaderStateProvider');
}
return context;
};
|