UI Bloom

useWidthScreen

A custom React hook that returns the current window width in pixels. It listens to resize events and updates the value in real-time, enabling responsive behavior in components. This hook is commonly used alongside custom breakpoints to adapt layouts based on screen size.

How To Use

Install

Run the following command in terminal to add these components in your project.

Import

First, import this component in the file where you want to use it.

import { useWindowWidth, BreakPoints } from '@/hooks/useWindowWidth';

Features

  • Real-time window width tracking
  • Server-Side Rendering (SSR) compatible
  • TypeScript support
  • Automatic cleanup of event listeners
  • Built-in standard breakpoints

On this page