React Layout Utils
Questions? Ask in Slack #vcc-ui
@volvo-cars/react-layout-utils
This package exposes useful utility hooks that can be use to help you with layout concerns.
Installation
💡 This package includes Typescript definitions
useElementDimensions
Useful for obtaining static render-time dimensions of a given DOM element.
Returns a ref and Dimensions object.
| Name | Description | Type | Default Value |
|---|---|---|---|
disabled |
If true, hook does not refresh dimensions | boolean |
false |
throttle |
A debounce interval to limit the frequency of dimension updates | number |
0 |
useResizeObserver
Useful for obtaining dynamic dimensions of a DOM element, where you need to act upon dimension changes in real time.
Returns ref, width, and height.
| Name | Description | Type | Default Value |
|---|---|---|---|
ref |
A ref to observe | undefined | RefObject | HTMLElement |
undefined |
box |
The box model to use for observation. | undefined | "border-box" | "content-box" | "device-pixel-content-box" |
content-box |
onResize |
A callback receiving the element size. If given, then the hook will not return the size, and instead will call this callback. | undefined | ({ width?: number, height?: number }) => void |
undefined |
round |
A function to use for rounding values instead of the default. | number |
Math.round() |
Examples
Demonstration implementations of the hooks can be found in the Storybook.