https://github.com/drawbotics/use-screen-size
Small utility hook to get the size of the screen matching media queries
https://github.com/drawbotics/use-screen-size
Last synced: 6 months ago
JSON representation
Small utility hook to get the size of the screen matching media queries
- Host: GitHub
- URL: https://github.com/drawbotics/use-screen-size
- Owner: Drawbotics
- Created: 2019-09-19T10:18:53.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T10:47:59.000Z (over 2 years ago)
- Last Synced: 2023-12-13T11:50:08.593Z (over 1 year ago)
- Language: JavaScript
- Size: 426 KB
- Stars: 10
- Watchers: 3
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Get Screen Size Hook
This hook will use the breakpoints defined in `@drawbotics/drylus-style-vars` to identify screen size where the app is running.
## Installation
```bash
$ npm install @drawbotics/use-screen-size @drawbotics/drylus-style-vars
```
## Usage
```js
import { useScreenSize } from '@drawbotics/use-screen-size';
const App = ({ children }) => {
const { screenSize, ScreenSizes } = useScreenSize();
return (
{do {
if (screenSize >= ScreenSizes.M) {
}
}}
{do {
if (screenSize < ScreenSizes.S) {
}
}}
{children}
)
};
export default App;
```
## Api
The hook returns two properties `screenSize` and `ScreenSizes`:
- `screenSize` is equivalent to the current size of the screen following the current media query matching the size
- `ScreenSizes` is a constant with the screen size value matching its size definition:
```
const ScreenSizes = {
XS: 1,
S: 2,
M: 3,
L: 4,
XL: 5,
};
```
This allows you to mimic the CSS way of writing queries, but in a more verbose way in JavaScript. You can use the comparative operators `<,=,>` to determine what should be rendered on the screen.
If you want to render something when the screen is smaller or equal to a small size:
```
if (screenSize <= ScreenSizes.S) {
// Content for small screens and lower
}
else {
// Content for screens larger than small
}
```
You can also target specific sizes with the `===` operator:
```
if (screenSize === ScreenSizes.L) {
// Only render this content when the screen is L (smaller than XL and larger than S)
}
```
For anything larger than XL you should use the following condition:
```
if (screnSize > ScreenSizes.XL) {
// Content for big screens
}
```
### Order of conditions
As with CSS `@media` queries, you have to check the screen size in the same order, i.e. from largest to smallest, otherwise the first one will always apply. This is because a small screen still falls within a large one, but not vice versa.
---
There's also another utility function called `getScreenSize` that returns exactly the contents of the value returned by the hook (properties of `screenSize`) (it's actually used internally in the hook) but that won't update the value based on the resize events.
Example:
```js
import { getScreenSize } from '@drawbotics/use-screen-size';
console.log(getScreenSize());
// on medium screen prints
3
```