Search…
Viewport
The Viewport component can be used to get some information about the app window. It provides the viewport dimensions and a set of convenient functions to help building responsive apps.

Usage

import { useViewport } from '@aragon/ui'
​
const MyComponent = () => {
const { within, below, above } = useViewport()
​
return (
<div>
{below('medium') && <div>small</div>}
{within('medium', 'large') && <div>medium</div>}
{above('large') && <div>large</div>}
</div>
)
}

Demonstration

Current viewport size: large

Props

throttle

  • Type: Number
  • Default value: 100
Change the throttle wait time.

children

  • Type: Function
A render prop that provides an object with everything needed. An object is passed to the function, with the following properties:
width
  • Type: Number
The current width of the viewport.

Example:

function App() {
const { width } = useViewport()
return <MyComponent compact={width < 400} />
}
height
  • Type: Number
The current height of the viewport.
within(min, max)
  • Type: Function
Returns true if the viewport width is between min and max, false otherwise. min is included while max is excluded. This is to prevent collisions between two breakpoints (see example).
min and max can be any number, or one of the available breakpoints (see breakpoint below).
If -1 is passed as either min or max, there will be no minimum or maximum. Note: see above() and below() for a more concise way to do this.

Example:

const { within } = useViewport()
return (
<div>
<p>{within(400, 500) ? 'viewport width within 400 and 500' : 'nope'}</p>
{within('min', 'small') && <div>A</div>}
{within('small', 'medium') && <div>B</div>}
{within('medium', 'large') && <div>C</div>}
{within('large', -1) && <div>D</div>}
</div>
)
above(x)
  • Type: Function
Returns true if the viewport width is above x, false otherwise.
x can be any number, or one of the available breakpoints (see breakpoint below).
below(x)
Returns true if the viewport width is below x, false otherwise.
x can be any number, or one of the available breakpoints (see breakpoint below).

Example:

const { below, above } = useViewport()
return (
<div>
{above('medium') && <div>A</div>}
{below('medium') && <div>B</div>}
</div>
)
breakpoint
An object that contains the number values of the different recommended breakpoints. It can be useful to set these values in CSS, for example.
Available breakpoints: "min" (320), "small" (540), "medium" (768), "large" (1170).

Example:

const { breakpoint } = useViewport()
return (
<div
css={`
min-width: ${breakpoint.min};
`}
>
<MyComponent compact={width < breakpoint.medium} />
</div>
)
Last modified 2mo ago
Copy link
On this page
Usage
Demonstration
Props