React Responsive
Description
what is it ? : utility library to interact with media query using Hooks.
URL : official Github Repository (opens in a new tab)
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 />;
}