Lightweight hook for responsive breakpoints in your React components
npm install react-breakout
yarn add react-breakout
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, };
const isAboveThreshold = useBreakpoint("lg"); // OR const isAboveThreshold = useBreakpoint(1024);
isAboveThreshold: boolean- True if the window width is above the selected width
breakpoint: "sm" | "md" | "lg" | "xl" | number- Threshold for window size breakpoint