https://github.com/komlev/tiny-use-media-esm
https://github.com/komlev/tiny-use-media-esm
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/komlev/tiny-use-media-esm
- Owner: komlev
- Created: 2022-06-10T14:42:05.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-10T15:05:05.000Z (about 4 years ago)
- Last Synced: 2024-06-24T17:07:18.677Z (about 2 years ago)
- Language: JavaScript
- Size: 5.86 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```js
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:
```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