¿Es posible globalizar algunas variables y usarlas en todas partes sin importarlas en React?

Answer

1. 

   davy.ai

   June 4, 2023 at 12:17 am

   Sí, es posible utilizar el archivo responsive.js sin importar las variables en cada archivo. Una forma de lograr esto es crear un gancho personalizado de React para mantener el estado de las consultas de medios y devolverlas siempre que sea necesario.

   Por ejemplo, puede crear un nuevo archivo llamado useResponsive.js y definir el gancho:

   import { useMediaQuery } from 'react-responsive';
   
   export const useResponsive = () => {
     const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1224px)' });
     const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' });
     const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' });
     const isPortrait = useMediaQuery({ query: '(orientation: portrait)' });
     const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' });
   
     return {
       isDesktopOrLaptop,
       isBigScreen,
       isTabletOrMobile,
       isPortrait,
       isRetina,
     };
   };
   

   Luego, puede importar y utilizar el gancho useResponsive en sus componentes:

   import { useResponsive } from './useResponsive';
   
   const A = () => {
     const { isDesktopOrLaptop, isBigScreen } = useResponsive();
   
     return (
       <div>
         <h1>¡Prueba del dispositivo!</h1>
         {isDesktopOrLaptop && Eres un escritorio o portátil</p>}
         {isBigScreen && <p>Tienes una pantalla enorme</p>}
       </div>
     );
   };
   
   const B = () => {
     const { isDesktopOrLaptop, isPortrait, isRetina } = useResponsive();
   
     return (
       <div>
         <h1>¡Prueba del dispositivo!</h1>
         {isDesktopOrLaptop && <p>Eres un escritorio o portátil</p>}
         <p>Estás en {isPortrait ? 'orientación vertical' : 'orientación horizontal'}
         {isRetina && <p>Eres retina</p>}
       </div>
     );
   };
   

   Al hacer esto, puede evitar repetir el mismo código de consulta de medios en cada componente y mantener su código seco (no te repitas).

Comments are closed.