useDimensions
useDimensions is a custom hook that measures dimensions of the referenced
element based on its box-model.
Import#
import { useDimensions } from '@chakra-ui/react'
Return value#
This hook returns an object with the properties marginBox, paddingBox,
borderBox, contentBox, border, padding, and margin.
Each of these properties contains a nested object which provides values respective to that property:
| Value: | Contents: |
|---|---|
| marginBox | top, right, bottom, left, width, height, x, y, center (x, y) |
| borderBox | top, right, bottom, left, width, height, x, y, center (x, y) |
| paddingBox | top, right, bottom, left, width, height, x, y, center (x, y) |
| contentBox | top, right, bottom, left, width, height, x, y, center (x, y) |
| border | top, right, bottom, left |
| padding | top, right, bottom, left |
| margin | top, right, bottom, left |
Usage#
With observe Parameter#
With the second parameter set to true, the hook will attach the resize and
scroll events to the window object. This will recalculate the reference
element's dimensions on scroll or resize of the page.
Parameters#
| Parameter | Type | Description |
|---|---|---|
ref | RefObject<HTMLElement> | Reference to the element you want to measure |
observe (optional) | boolean | If set to true, the resize and scroll events will be attached to the window and update the dimensions on each event |