use-window-size

Hook to get the viewport bounds (width and height).

Introduction

This hook optimizes window resize event handling by:

• Only initializing a single event listener for all instance of the hook used.
• Throttling how often the event resize handler fires (Max 200ms between calls).

This library is also SSR safe, and only runs on the client.

Installation

Install this package with npm.

npm i @buildinams/use-window-size

Usage

To use this hook, simply import it and use it like a normal React hook.

import useWindowSize from "@buildinams/use-window-size";

const { width, height } = useWindowSize();

API

On first render this hooks returns 0 for both window width and height and then returns window width and height once is mounted.

Requirements

This library requires a minimum React version of 17.0.0.

Requests and Contributing

Found an issue? Want a new feature? Get involved! Please contribute using our guideline here.