Create React Hook To Get Available Screen Height
Closed this issue · 8 comments
Create a custom React hook that returns the available height of the screen, minus the app bar.
To get started, create a new directory called lib inside of src with a file called browser.js, like so: client/src/lib/browser.js and export the blow functionality. Here are the guidelines to get this done:
- Add a ID to the app bar component, so we can directly reference it.
- Create a function that will calculate the available height of the screen, minus the app bar. This function should get the height of the window, and subtract the height of the app bar (which you can get by referencing its ID and using a method like getElementById).
- Create a state variable to store the height value returned by the calculation function.
- Use the useEffect hook to set up a resize event listener on the window object. When the app bar's height changes, the window's height will also change, so this event listener will allow you to recalculate the available height and update the state variable.
- Return the state variable from your hook, so that other components can use it to determine the available height of the screen.
If you get stuck on any step I will be able to assist.
May I be assigned to this issue?
May I be assigned to this issue?
Assigned! Thank you
@rcamach7 I'm pretty much finished with this. But before I commit and submit a PR what should be returned if the window height is smaller than the height of the app bar? Do we want a negative number? Perhaps just return 0 for any calculation below 0?
What are your thoughts?
@JonGeorge
0 would make the most sense in this scenario since it's simply communicating there's no available space
Opened issue back up for anyone to grab!