{"repo":"rob2d/use-viewport-sizes","free":true,"listed":false,"github":"https://github.com/rob2d/use-viewport-sizes","clone":"git clone https://github.com/rob2d/use-viewport-sizes.git","description":"tiny React hook which allows you to track visible window viewport size in your components w/ an optional debounce for updates for optimal rendering.","language":"JavaScript","stars":41,"topics":["react","hooks","window","resize","viewport","sizes","dimensions","reactjs","react-hooks","npm-package"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"use-viewport-sizes # A lightweight, TypeScript-compatible React hook for tracking viewport sizes in your components. Includes optional debounce, throttle, and custom memoization for optimized rendering. Table of Contents - Installation - Benefits - Usage - Basic Use-case - Measure/Update only on one dimension - With Throttling - With Debouncing - Only update vpW/vpH passed on specific conditions - Support - License Installation ## Benefits ## - extremely lightweight and zero dependencies -- adds 2.37kb pre gzip, and 1.08kb after gzip. - only one window.onresize handler used to subscribe to any changes in an unlimited number of components no matter the use-cases. - 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. - debouncing does not create new handlers or waste re-renders in your component; the results are also pooled from only one resize result. - optional hash function to update component subtree only at points you would like to. - supports lazy loaded components and SSR out of the box. - compatible with React v16 v17 v18 v19 Usage ## See it in Action ### CodeSandbox IDE Basic Use-case registers dimension changes on every resize event immediately Measure/Update only on one dimension If passed options.dimension as w or h , only the viewport width or height will be measured and observed for updates. The only dimension returned","default_branch":null,"files":null,"tree":[],"storefront":"/r/rob2d","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/rob2d/use-viewport-sizes/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}