useDimensions

@coinbase/cds-web@9.28.0

Measures an element's dimensions using ResizeObserver.

import { useDimensions } from '@coinbase/cds-web/hooks/useDimensions'

󰒨

Source

󰏖

View as Markdown

---

Basic usage

Loading...

󰙡

Live Code

function Example() {
  const ref = useRef(null);
  const { width, height } = useDimensions({ ref });

  return (
    <Box ref={ref} padding={3} background="bgAlternate" borderRadius={300} width="100%">
      <Text font="headline">
        This box is {width}px wide and {height}px tall
      </Text>
    </Box>
  );
}

---

With Breakpoints

Loading...

󰙡

Live Code

function Example() {
  const ref = useRef(null);
  const { width, currentBreakpoint } = useDimensions({
    ref,
    breakpoints: {
      small: 300,
      medium: 400,
      large: 500,
    },
  });

  return (
    <Box ref={ref} padding={3} background="bgAlternate" borderRadius={300} width="100%">
      <VStack gap={2}>
        <Text font="headline">Width: {width}px</Text>
        <Text font="headline">Current breakpoint: {currentBreakpoint || 'none'}</Text>
      </VStack>
    </Box>
  );
}