You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
a tiny TS-compatible React hook which allows you to track visible window viewport size in your components w/ an optional debounce, throttle or custom memo function for updates for optimal rendering.
7
+
A lightweight, TypeScript-compatible React hook for tracking viewport sizes in your components. Includes optional debounce, throttle, and custom memoization for optimized rendering.
8
+
9
+
## Table of Contents
10
+
-[Installation](#installation)
11
+
-[Benefits](#benefits)
12
+
-[Usage](#usage)
13
+
-[Basic Use-case](#basic-use-case)
14
+
-[Measure/Update only on one dimension](#measureupdate-only-on-one-dimension)
15
+
-[With Throttling](#with-throttling)
16
+
-[With Debouncing](#with-debouncing)
17
+
-[Only update vpW/vpH passed on specific conditions](#only-update-vpwvph-passed-on-specific-conditions)
- extremely lightweight and zero dependencies -- adds **2.04kb** after gzip.
28
+
- extremely lightweight and zero dependencies -- adds **2.38kb** pre gzip, and **1.09kb** after gzip.
17
29
- only one `window.onresize` handler used to subscribe to any changes in an unlimited number of components no matter the use-cases.
18
30
- optional debounce to delay updates until user stops dragging their window for a moment; this can make expensive components with size-dependent calculations run much faster and your app feel smoother.
19
31
- debouncing does not create new handlers or waste re-renders in your component; the results are also pooled from only one resize result.
@@ -125,4 +137,4 @@ Otherwise, if this was useful and you'd like to show your support, no donations
0 commit comments