@volvo-cars/react-layout-utils

Utility hooks that assist with layout concerns

Usage no npm install needed!

<script type="module">
  import volvoCarsReactLayoutUtils from 'https://cdn.skypack.dev/@volvo-cars/react-layout-utils';
</script>

README

React Layout Utils

@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.