https://github.com/komlev/tiny-use-media

Small (0.5 Kb) react hook for getting media breakpoints state info in runtime
https://github.com/komlev/tiny-use-media

breakpoints hooks media usemedia

Last synced: 3 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/komlev/tiny-use-media
• Owner: komlev
• License: mit
• Created: 2022-02-01T17:17:36.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-12-13T20:46:05.000Z (2 months ago)
• Last Synced: 2025-02-08T06:26:12.011Z (13 days ago)
• Topics: breakpoints, hooks, media, usemedia
• Language: JavaScript
• Homepage:
• Size: 27.3 KB
• Stars: 54
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# tiny-use-media

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

## Usage

```

npm i tiny-use-media --save

```

Adn in your react code

```js

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:

```js

// 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:

```js

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

```js

{

    current: "tablet",

    mobile: true,

    tablet: true,

    desktop: false

}

```

## License

MIT