Overview

The useWindowSize hook is an effective tool for responsive design in React applications. It tracks the size of the browser window and updates the dimensions dynamically on window resize events. This hook is especially useful for creating responsive components that adjust according to the window size.

Incorporating useWindowSize into your React components allows you to easily manage UI responsiveness, adapting your application to various screen sizes and enhancing the user experience.

Key Features

• Real-time Window Size: Provides the current width and height of the browser window.
• Responsive Design: Facilitates the creation of responsive UI components.
• Dynamic Updates: Automatically updates dimensions on window resize events.

How It Works

The hook uses useState to store the window’s dimensions and useEffect to listen for resize events, ensuring that the dimensions are updated in real-time as the window’s size changes.

Syntax

const { width, height } = useWindowSize();

• Returns an object containing the current width and height of the window.

Usage Example

Here’s an example of how to use the useWindowSize hook in a component:

import { useWindowSize } from '@akinon/ui-hooks';
 
const MyComponent = () => {
  const { width, height } = useWindowSize();
 
  return (
    <div>
      <p>Window width: {width}px</p>
      <p>Window height: {height}px</p>
    </div>
  );
};
 
export default MyComponent;