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 | 2x 2x 2x 2x | import { 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 = null,
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,
};
export const useHeaderState = () => {
const context = useContext(HeaderStateContext);
if (context === undefined) {
throw new Error("useHeaderState must be used within a HeaderStateProvider");
}
return context;
};
|