useBreakpoints

By default, this hook returns the current breakpoint. It responds to window resizing and is built to work in server-side rendering (SSR) applications. In more detail, it provides information about the size of the window width or, optionally, the width of a target element. It also provides the ability to pass a custom breakpoints object setting upon which to map the target element.

Unlike the useResponsiveContext() hook, it returns a true value only for the breakpoint in use and does not require a context provider.

Usage

import { useBreakpoints } from "@wonderflow/react-components";

export default () {
  const { breakpoints, matches, size } = useBreakpoints();

  return (
    <div>
      <p>{`Breakpoints: ${JSON.stringify(breakpoints)}`}</p>
      <p>{`Matches: ${matches}`}</p>
      <p>{`Size: ${size}`}</p>
    </div>)
}

API Reference

Return value