What I am basically trying to create is a navbar that has two completely different html hierarchy based on the window size. I want it to be different for mobile than for a desktop version. eg a nav bar that is on the right on desktop and one that is on the top for mobile.
A simply state of what was doing. I created a const that would use a state of the screen size. I had used the useState() to get a default for now but I know that if I was first loading on desktop and it it was defaulted to mobile. I would have to resize first to get the desktop version instead.
const [sizeState, setSizeState] = useState("mobile");
const changeNavbar = () => {
if (window.innerWidth <= 900) {
setSizeState("mobile");
} else {
setSizeState("desktop");
}
};
window.addEventListener('resize', changeNavbar);
the sizeState would then call an if function determin what state it curently is set to.
if (sizeState === "mobile") {
return ( //some code for mobile) }
else {
// return some code for desktop
}
for now it always returns the mobile version even if loading upon a innderwidth that is above 900 abd only on resize it would do something.
I have been trying to use a onload stuff and an eventlistener that would listen to load. but i cant manage to call the changeNavbar function on the first load of the page.
I saw people recomending usein useMediaQuerry but i dont know how to get it to work based on my if (mediaquery is set to md) { return( mobile navbar) }
if someone could help me use the useMediaQuerry in this instead of my previous attempt, so that i can have two seperated returns i would also be soooooo thankful for the help!
You can simply implement it using styled-components and styled-breakpoints packages and its hooks API.
Here is an example: https://codesandbox.io/s/styled-breakpoints-n8csvf
import { down } from "styled-breakpoints";
import { useBreakpoint } from "styled-breakpoints/react-styled";
export default function App() {
const isMobile = useBreakpoint(down("sm"));
return (
<div className="App">
{isMobile ? "Mobile View" : "Desktop View"}
</div>
);
}import useWindowSize from "window-size-hook";
export default function App() {
const { width, height } = useWindowSize();
return (
<div className="box">
<h1>useWindowSize Hook</h1>
<p>
height: {height}
<br />
width: {width}
</p>
</div>
);
}