@volvo-cars/react-layout-utils

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.