Introduction
In this project, you will learn how to create a custom React Hook called useWindowSize
to get the current window size and use it to conditionally render the navigation bar in a web application.
👀 Preview
![project preview](https://file.labex.io/namespace/718bace8-27a3-4200-a588-dde4041ceeb9/react/project-browser-window-size/lab-browser-window-size/assets/finished.gif)
🎯 Tasks
In this project, you will learn:
- Implement the
useWindowSize
custom Hook to get the current window size - Use the
useWindowSize
Hook in theApp
component to update the navigation bar based on the window width
🏆 Achievements
After completing this project, you will be able to:
- Create a custom React Hook to encapsulate reusable functionality
- Utilize the
useState
anduseEffect
hooks to manage state and side effects - Conditionally render components based on the current window size