React Responsive

Description

what is it ? : utility library to interact with media query using Hooks.
URL : official Github Repository
version : 9.0.3
Why ? :

Lightweight and simple .
Hooks based.

Application

example :


// let's import the media query hook
import { useMediaQuery } from 'react-responsive';
 
// Specify target Medeia  dimension
const isDesktopOrLaptop = useMediaQuery({
  query: '(min-width: 1224px)',
});
const isMobile = useMediaQuery({
  query: '(max-width: 524px)',
});
 
// impolement it inside your code
 
{
  isDesktopOrlaptop && <BigNavigation />;
}
{
  isMobile && <SmallNavigation />;
}