useWindowSize

A custom React hook to track and provide the current window size in real-time.
useWindowSize(): { width: number; height: number }
Parameters
  • Returns: An object containing:
    • width: The width of the browser window in pixels.
    • height: The height of the browser window in pixels.

Example

import { useWindowSize } from "daily-toolset/hooks";

// Example usage
function WindowSizeExample() {
  const { width, height } = useWindowSize();

  return (
    <div>
      <h1>Window Size</h1>
      <p>Width: {width}px</p>
      <p>Height: {height}px</p>
    </div>
  );
}

Use Cases

  • Adapting layout or UI based on screen size changes (responsive design).
  • Tracking window dimensions for custom breakpoints or animations.
  • Providing real-time feedback for window resizing events.