@drawbotics/use-screen-size
v2.0.0
Published
Hook used to get the current screen size for responsive behaviour
Downloads
9
Keywords
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
$ npm install @drawbotics/use-screen-size @drawbotics/drylus-style-vars
Usage
import { useScreenSize } from '@drawbotics/use-screen-size';
const App = ({ children }) => {
const { screenSize, ScreenSizes } = useScreenSize();
return (
<Page>
{do {
if (screenSize >= ScreenSizes.M) {
<Header />
}
}}
{do {
if (screenSize < ScreenSizes.S) {
<Sidebar />
}
}}
<Content>
{children}
</Content>
</Page>
)
};
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 sizeScreenSizes
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:
import { getScreenSize } from '@drawbotics/use-screen-size';
console.log(getScreenSize());
// on medium screen prints
3