Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useWindowSize callback #915

Open
amcdnl opened this issue Jan 21, 2020 · 5 comments · May be fixed by #2518
Open

useWindowSize callback #915

amcdnl opened this issue Jan 21, 2020 · 5 comments · May be fixed by #2518
Labels
enhancement New feature or request good first issue Good for newcomers help wanted Extra attention is needed
Projects

Comments

@amcdnl
Copy link

amcdnl commented Jan 21, 2020

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

const { ... } = useWindowSize(() => {
...callback on resize...
});
@streamich streamich added enhancement New feature or request good first issue Good for newcomers help wanted Extra attention is needed labels Jan 24, 2020
@morgsmccauley
Copy link

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
Copy link
Owner

@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.

@streamich streamich added this to To do in react-use via automation Jan 27, 2020
@streamich streamich moved this from To do to In progress in react-use Jan 27, 2020
@morgsmccauley
Copy link

I'll try draft something up 👍

@morgsmccauley
Copy link

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
Copy link
Owner

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.

@morgsmccauley morgsmccauley removed their assignment Jul 31, 2022
@yahia-berashish yahia-berashish linked a pull request Sep 3, 2023 that will close this issue
13 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers help wanted Extra attention is needed
Projects
react-use
  
In progress
3 participants