Fundamentals
API
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
1
type useViewportChange = (
2
callback: () => void,
3
debounceDuration?: number,
4
)
Copied!
Example
1
import React, { useState } from 'react'
2
import { useViewportChange } from 'atomic-layout'
3
4
export const WidthObserver = ({ target }) => {
5
const [windowWidth, setWindowWidth] = useState(0)
6
7
useViewportChange(() => {
8
setWindowWidth(window.clientWidth)
9
})
10
11
return <p>Window width: {windowWidth}px</p>
12
}
Copied!
Last modified 2yr ago
Copy link