use-viewport
useViewport()
is a custom React Hook that reports on the current height, width, and size moniker of the current viewport. It uses a window
listener to auto-update whenever the size of the viewport changes.
Usage
const SomeComponent = () => {
const viewport = useViewport();
return <>
<div>The viewport is currently {viewport.width} pixels wide.</div>
<div style={{display: viewport.size === 'xs' ? 'inherit' : 'none'}}>
This div only displays on "xs"-sized viewports.
</div>
<div style={{display: viewport.size === 'xl' ? 'none' : 'inherit'}}>
This div disappears once the viewport reaches an "xl" size.
</div>
</>;
}
Methods
useViewport()
const API = {
arguments: {
initialViewportSizes: {
optional,
format: 'an array of viewportSize objects',
defaultValue: [
{
name: 'xs',
minWidth: Number.MIN_SAFE_INTEGER,
maxWidth: 543,
},
{
name: 'sm',
minWidth: 544,
maxWidth: 767,
},
{
name: 'md',
minWidth: 768,
maxWidth: 1023,
},
{
name: 'lg',
minWidth: 1024,
maxWidth: 1279,
},
{
name: 'xl',
minWidth: 1280,
maxWidth: Number.MAX_SAFE_INTEGER,
},
],
},
},
returns: {
getViewportSizes: Function,
height: Integer,
setViewportSizes: Function,
size: string,
width: Integer,
},
}
Examples:
const SomeComponent = () => {
const viewport = useViewport();
return <>
<div>The viewport is {viewport.height} pixels high.</div>
</>
}
The Hook automatically sets a listener on the window
object and the height
, width
, and size
values will update upon any change in viewport size.
.getViewportSizes()
const API = {
arguments: {
// none
},
returns: [
'viewportSize Objects'
],
}
Every object in the array will have the following data:
const viewportSize = {
name: string,
minWidth: Integer,
maxWidth: Integer,
}
Examples:
const SomeComponent = () => {
const viewport = useViewport();
console.log(viewport.getViewportSizes());
/*
outputs the default viewport sizes:
[
{
name: 'xs',
minWidth: Number.MIN_SAFE_INTEGER,
maxWidth: 543,
},
{
name: 'sm',
minWidth: 544,
maxWidth: 767,
},
{
name: 'md',
minWidth: 768,
maxWidth: 1023,
},
{
name: 'lg',
minWidth: 1024,
maxWidth: 1279,
},
{
name: 'xl',
minWidth: 1280,
maxWidth: Number.MAX_SAFE_INTEGER,
},
]
*/
return <></>
}
.setViewportSizes()
const API = {
arguments: {
sizes: {
required,
format: 'Array of viewportSize Objects',
},
},
returns: void,
}
Examples:
const SomeComponent = () => {
const viewport = useViewport();
useEffect(() => {
viewport.setViewportSizes([
{
name: 'big',
minWidth: 1200,
maxWidth: Number.MAX_SAFE_INTEGER,
},
{
name: 'small',
minWidth: 1,
maxWidth: 1199,
},
]);
}, []);
return <></>
}
Since useViewport()
's values are stateful, setting viewport size directly in the body of a functional component will lead to endless re-renders. That's why this example is shown inside of useEffect()
.