useViewportChange

Specification

Executes a given callback on every viewport size change. You can treat this hook as a throttled window resize handler.

Viewport changes are throttled by default for optimal performance.

Definition

type useViewportChange = (
callback: () => void,
debounceDuration?: number,
)

Example

import React, { useState } from 'react'
import { useViewportChange } from 'atomic-layout'
export const WidthObserver = ({ target }) => {
const [windowWidth, setWindowWidth] = useState(0)
useViewportChange(() => {
setWindowWidth(window.clientWidth)
})
return <p>Window width: {windowWidth}px</p>
}