useScreenSize()

The useScreenSize() hook allows responsive breakpoint detection in components. It returns helper methods (equals, lessThan, greaterThan , greaterThanEqual , lessThanEqual ) and a string method (toString) representing the current screen size: xs, sm, md, lg, xl, or 2xl for size bigger than 1535 pixel.

Import

import { useScreenSize } from 'react-haiku';

Usage

Current Screen Size: xl

Is the screen size medium ? No

Is the screen size less than large ? No

Is the screen size greater than small ? Yes

Is the screen size greater than or equal to small ? Yes

Is the screen size less than or equal to small ? No

import { useScreenSize } from 'react-haiku';

export const MyComponent = () => {
  const screenSize = useScreenSize();

  return (
    <div>
     <h1>Current Screen Size: {screenSize.toString()}</h1>
      <p>Is the screen size medium ? {screenSize.eq("md") ? "Yes" : "No"}</p>
      <p>Is the screen size less than large ? {screenSize.lt("lg") ? "Yes" : "No"}</p>
      <p>Is the screen size greater than small ? {screenSize.gt("sm") ? "Yes" : "No"}</p>
      <p>Is the screen size greater than or equal to small ? {screenSize.gte("sm") ? "Yes" : "No"}</p>
      <p>Is the screen size less than or equal to small ? {screenSize.lte("sm") ? "Yes" : "No"}</p>
    </div>
  );
};