useDimensions

@coinbase/cds-web@8.13.6

Measures an element's dimensions using ResizeObserver.

Import

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

SourceView source code

---

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%">
      <TextHeadline>
        This box is {width}px wide and {height}px tall
      </TextHeadline>
    </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}>
        <TextHeadline>Width: {width}px</TextHeadline>
        <TextHeadline>Current breakpoint: {currentBreakpoint || 'none'}</TextHeadline>
      </VStack>
    </Box>
  );
}