useWindowSize callback

[amcdnl]

Add ability to trigger a callback when the size is updated.

const { ... } = useWindowSize(() => {
...callback on resize...
});

[morgsmccauley]

Keen to take this on 😄

1. Is there anything useful which we would want to return?
2. Would another arg to control debouncing be useful or should we leave that to the user to handle?
3. Would it be useful to pass current height/width to the callback or do we leave this to the user as well?

[streamich]

@morgsmccauley great, its all yours!

Is there anything useful which we would want to return?

Would be useful to return its state, i.e {width, height}.

Would another arg to control debouncing be useful or should we leave that to the user to handle?

Maybe we can use useRafState.

[morgsmccauley]

I'll try draft something up 👍

[morgsmccauley]

Just trying to understand things a little more:

• What is the use case here? useWindowSize triggers a re-render with the latest width/height. Wouldn't using these values in the component achieve the same thing as a callback?

• I think i've landed on exposing a callback arg from useRafState so that useWindowSize can leverage this to trigger before next re-paint. Is this along the lines of what you had in mind?

Will appreciate any answers to these! 😄

[streamich]

What is the use case here?

If you want to do something with the window size, like some side-effect of pass the state to parent component, now you have to use useWindowSize together with useEffect:

const {width, height} = useWindowSize();
useEffect(() => {
  // ...
}, [width, height]);

with a callback it would be more direct:

const {width, height} = useWindowSize({
  onChange: (width, height) => {
    // ...
  },
});

Is this along the lines of what you had in mind?

Would need to see the code for that.

[mahmoud-elgammal]

I’ve implemented the callback feature. Now, users can pass a callback to handle window size changes directly.
The feature is documented and tested.

PR: #2608

Looking forward to your feedback!