useBreakpoints

@coinbase/cds-web@8.21.3

Returns an object with a boolean for each breakpoint of the window. Useful for conditionally rendering components or component trees based on the current window breakpoint.

Import

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

SourceView source code

---

Related components

• MediaQueryProvider

---

󰏖

View as Markdown

---

Basic usage

Use the useBreakpoints hook to conditionally render components or component trees based on the current window breakpoint.

See how breakpoints are defined in the media object →

󰣸

Warning

Do not use useBreakpoints for responsive styles. Use CSS media queries or the StyleProps API for responsive styles.

Loading...

󰙡

Live Code

() => {
  const breakpoints = useBreakpoints();
  return <JSONCodeBlock json={breakpoints} />;
};

---