useDimensions

useDimensions hook provides a simple way to get the dimensions of an element.

Import

import { useDimensions } from "@prismane/core/hooks";

Usage

function Demo() {
  const ref = useRef(null);

  const dimensions = useDimensions(ref);

  return (
    <Flex direction="column" gap={fr(5)}>
      <Box w={fr(50)} h={fr(40)} p={fr(5)} m={fr(2)} bg="primary" ref={ref} />
      <List>
        {dimensions &&
          Object.entries(dimensions).map(([key, value]) => (
            <List.Item key={key}>
              <Text as="strong">{key}:</Text>{" "}
              {typeof value === "object" ? JSON.stringify(value) : value}
            </List.Item>
          ))}
      </List>
    </Flex>
  );
}

API

Parameters

Name	Type	Description	Default
`value`	`any`	The value that should be debounced.	-
`delay`	`number`	The debounce delay.	`500`

Return Value

Name	Type	Description
`debounced`	`any`	The debounced value.

Go BackuseDebounce

Up NextuseDraggable