React Breakout

Lightweight hook for responsive breakpoints in your React components

Installation

NPM

npm install react-breakout

Yarn

yarn add react-breakout

Usage

The useBreakpoint hook returns true when the window width is higher than the selected width.

import { useBreakpoint } from "react-breakout";
const App = () => {
  const isDesktop = useBreakpoint("md");
  return (
    <div>
      <p>{isDesktop ? "Yes" : "No"}</p>
    </div>
  );
};

The useBreakpoint hook accepts either a number as the pixel width threshold or on of the following predefined breakpoints:

const breakpoints = {
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
};

API

useBreakpoint

const isAboveThreshold = useBreakpoint("lg");
// OR
const isAboveThreshold = useBreakpoint(1024);

Returns

• isAboveThreshold: boolean
  • True if the window width is above the selected width

Arguments

• breakpoint: "sm" | "md" | "lg" | "xl" | number
  • Threshold for window size breakpoint