Lo que básicamente estoy tratando de crear es una barra de navegación que tiene dos jerarquías html completamente diferentes según el tamaño de la ventana. Quiero que sea diferente para dispositivos móviles que para una versión de escritorio. por ejemplo, una barra de navegación que está a la derecha en el escritorio y una que está en la parte superior para dispositivos móviles.
Un simple estado de lo que estaba haciendo. Creé una const que usaría un estado del tamaño de la pantalla. useState() para obtener un valor predeterminado por ahora, pero sé que si primero estaba cargando en el escritorio y estaba predeterminado en el dispositivo móvil. Tendría que cambiar el tamaño primero para obtener la versión de escritorio.
const [sizeState, setSizeState] = useState("mobile"); const changeNavbar = () => { if (window.innerWidth <= 900) { setSizeState("mobile"); } else { setSizeState("desktop"); } }; window.addEventListener('resize', changeNavbar); sizeState luego llamaría a una función if para determinar en qué estado está configurado actualmente.
if (sizeState === "mobile") { return ( //some code for mobile) } else { // return some code for desktop } por ahora, siempre devuelve la versión móvil, incluso si se carga en un ancho interior superior a 900 y solo al cambiar el tamaño haría algo. He estado tratando de usar un material de carga y un detector de eventos que escucharía la carga. pero no puedo llamar a la función changeNavbar en la primera carga de la página.
Vi gente recomendando usein useMediaQuerry pero no sé cómo hacer que funcione en función de mi if (mediaquery is set to md) { return( mobile navbar) }
si alguien pudiera ayudarme a usar useMediaQuerry en esto en lugar de mi intento anterior, para que pueda tener dos retornos separados, ¡también estaría muy agradecido por la ayuda!
Simplemente puede implementarlo utilizando paquetes de componentes con estilo y puntos de interrupción con estilo y su API de ganchos.
Aquí hay un ejemplo: 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> ); }