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.