Learn React Hooks

Responsively hiding components

In our blog app, we are going to hide the UserBar and ChangeTheme components completely when the screen size is very small so that, when reading a post on a mobile phone, we can focus on the content.

Let's get started implementing the Window Size Hook:

1. First, we have to install the @rehooks/window-size library:

> npm install --save @rehooks/window-size

2. Then, we import the useWindowSize Hook at the start of the src/pages/HeaderBar.js file:

import useWindowSize from '@rehooks/window-size'

3. Next, we define the following Window Size Hook after the existing Context Hooks:

            const { innerWidth } = useWindowSize()

4. If the window width is smaller than 640 pixels, we assume that the device is a mobile phone:

 const ...