tiny-use-media-esm

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

Usage

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

Adn in your react code

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

// ...

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
}

License

MIT