use-breakpoints
Utility hook to define breakpoints given the screen size
Demo
Current Breakpoints
Mobile Size
Tablet Size
Desktop Size
Resize your browser window to see the values update in real-time
Installation
This hook is based on the use-screen-size hook.
Copy and paste the following code into your project.
import useScreenSize from "@/hooks/use-screen-size";
const MOBILE_WIDTH = 768;
const TABLET_WIDTH = 1024;
export type BreakPoints = {
isMobile: boolean;
isTablet: boolean;
isDesktop: boolean;
}
export const useBreakPoints = (): BreakPoints => {
const { width } = useScreenSize();
const isMobile = width < MOBILE_WIDTH;
const isTablet = width >= MOBILE_WIDTH && width < TABLET_WIDTH;
const isDesktop = width >= TABLET_WIDTH;
return { isMobile, isTablet, isDesktop };
}Usage
import { useBreakPoints } from "@/hooks/use-breakpoints";const { isMobile, isTablet, isDesktop } = useBreakPoints();