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>
)
RootPortal
aragonDS
Last modified 4mo ago
Viewport

Usage

Demonstration

Props

`throttle`

`children`

Example:

Example:

Example:

Example:
