Aller au contenu principal

Responsive

Ensemble de constantes et de fonctions permettant de gérer la responsivité.

Références​

Les tailles de responsive de Reactic sont définies selon différentes tailles d'écrans.

screenSize = {
  mobileS: 320,
  mobileM: 375,
  mobileL: 425,
  tablet: 768,
  tabletM: 1080,
  laptop: 1024,
  laptopL: 1440,
  desktop: 2560,
};

const isMobileScreen = (): boolean;

Utilisation​

Pour utiliser le responsive, vous pouvez utiliser directement les constantes dans vos composants.

import { screenSize } from '@reactic/styles';

const mySize = 1024;

if(mySize === screenSize.laptop)
  console.log('I am a laptop');

Il est aussi possible d'utiliser les constantes minWidth et maxWidth pour définir des breakpoints.

Exemple​

import { minWidth } from '@reactic/styles';

const StyledDiv = styled.div`
  background-color: red;
  
  @media (min-width: ${minWidth.tablet}) {
    background-color: blue;
  }
`;

isMobileScreen​

La fonction isMobileScreen permet de définir des comportements en fonction de la taille de l'écran.

Exemple​

import { isMobileScreen } from '@reactic/styles';

const MyComponent = () => {
  const isMobile = isMobileScreen();
  
  return (
    <StyledDiv>
      {isMobile ? 'I am a mobile' : 'I am not a mobile'}
    </StyledDiv>
  );
};