tiny-use-media

Small (0.6 Kb) react hook for getting media breakpoints state info in runtime

Usage

npm i tiny-use-media --save

Adn in your react code

import { useMedia } from "tiny-use-media";

// ...

const { current, md, lg } = useMedia({
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
});

console.log({ current, md, lg });
/*
  if you current screen size is 900px
  it will print:
  { current: 'md', md: true, lg: false }
*/

API

Input:

// object with breakpoints names/values
const breakpointsConfig = {
  mobile: 320, // min-width for mobile
  tablet: 640, // min-width for tablet
  desktop: 1024, // min-width for desktop
};

useMedia(breakpointsConfig);

Output:

const output = useMedia(breakpointsConfig);

Output contains "current" field which corresponds to a current breakpoint.

It also contains boolean values for each provided breakpoint.

E.g. output for screen size of 900px

{
    current: "tablet",
    mobile: true,
    tablet: true,
    desktop: false
}

ESM

If you need ESM module it can be found here here or installed with

npm i tiny-use-media-esm --save

License

MIT