Add Throttle Support and use as default input behavior

[hilja]

Hey, I love this hook, it does just the one thing it's supposed to!

I'd love to throttle the function rather than debounce, would be cool to see the changes while resizing. Now it requires the user to stop.

Would you be willing to put that in if I'd open a PR?

[rob2d]

Sorry for the delayed reply and thanks for the feedback!

Actually, if you opened a PR that would be fantastic. Throttling is something I considered initially, but just never took the time to add in. Do you have some ideas on how to do it in a way that would be backwards compatible with current implementation? Either way, I think it's still feasible to bump the major version but there's an obvious benefit if so 🙂

[rob2d]

@hilja never quite saw an update on this, but I do really appreciate the feedback and want to implement this as I'll have free time for once.

I am considering currently to do this via an options object interface so that things are still backwards compatible and the default behavior can still apply without major version bumps/people being afraid of adopting or upgrading; it should be as painless as it's just a simple helper hook and shouldn't eat into people's current work to update since I know of quite a few projects using it in prod now.

I think though that this should take precedence after implementing issue #4 . That would allow you to pass a function to pass in a callback/memorizing function which can solve the same problem by allowing any custom hook. It can also be used as the basis to build on for this.

If you have any thoughts or even if you have moved to using another library, it would be great to know. But if not then just a heads up to yourself or anyone else considering to use this lib or using it that this will still be maintained and have some updates soon.

[rob2d]

Had some time this afternoon finally to do that and should be able to get this to NPM @ v0.2.8; wouldn't have any breaking changes. It is still not directly supporting this feature but makes that possible without very much work. A nice next-iterative-step once this is in would be to add a public interface for throttle using this custom hashing interface support internally.

[rob2d]

Update: unexpectedly landed/accepted a busy contract job before posting the last update, so if anyone is using this lib sorry for leaving anyone hanging -- not that it's a very good excuse.

Actively working on things now: began with Typescript support since having both a debounce and throttle interface would be confusing without IDE inference (TS annotation is on v0.2.12 now), but also to support other features and have a good base for expandability.

The priority of this is moved down to tackle some other smaller things, and have other responsibilities to take care of, but should publish a major version within the week and its looking good.

[rob2d]

https://www.npmjs.com/package/use-viewport-sizes/v/0.4.0-beta.0

Added and pushed to v0.4.0-beta.0. Will push to main version once code sandbox is updated with new examples. Throttle also replaces debounce as default behavior when number supplied.

Example

import React from 'react';
import useViewportSizes from 'use-viewport-sizes';

function MyExpensivelyRenderedComponent(props) {
    const [vpWidth, vpHeight] = useViewportSizes({ throttleTimeout: 1000 }); // 1s throttle

    // ...renderLogic
}