Creating and Testing Responsive Style in React
When creating my first real application, I spent plenty of time tinkering with the style, because I wanted my creation to look great. I’d adjust the margin by a few pixels, and since I used React, I could check how the adjustment affected my app’s look right away. Unfortunately, I was so focused on how it looked in that specific context that I ignored how the app would look on other devices.
After I deployed the app, I sent the link to my girlfriend who told me that my site was broken already. I checked the link I sent her on my computer, and it looked fine so I told her it must be specific to her computer. She said she had clicked the link from her phone, so I checked it out on my phone to see the problem.
From my phone, the app looked like a huge mess. So many things overlapped each other and fell out of frame. I knew what it was supposed to look like, and even I couldn’t find everything on the page. Based on how often people go on the internet from their phones, I knew making my app responsive should be a top priority.
react-responsive npm Package
Getting Set Up
With the react-responsive npm package, responsiveness can be pretty simple. First I installed the package with the terminal command npm i react-responsive. Then I imported the ‘MediaQuery’ component into any component that needed to use it with the line:
import MediaQuery from 'react-responsive'This package offers a ‘useMediaQuery’ React Hook as well, but the component works well for my responsive needs.
Using the Component
I created two different navbar components. One of these navbars is styled to look good on a computer screen, and the other is styled for use on mobile devices. Using the ‘MediaQuery’ component, an app can recognize when someone is using a computer or a mobile device to visit the app and to provide the appropriate navbar for their needs.
I replaced the navbar specified to computer dimensions with a responsive navbar component. This responsive component holds two ‘MediaQuery’ components with differently named props. One of these ‘MediaQuery’ components has a prop named minDeviceWidth, which is set to 1224. My navbar component specified to computer dimensions (AKA <NavDefault/>) goes within this ‘MediaQuery’ component. If a user accesses the app with a device exceeding the ‘minDeviceWidth’, the contents of that ‘MediaQuery’ component are run. The other component’s prop is called maxDeviceWidth, which is also set to 1224. A user with a mobile device will not exceed the ‘maxDeviceWidth’ of 1224, so the contents (AKA <NavMobile/>) of the second ‘MediaQuery’ component will run. Both these ‘MediaQuery’ components and their contents need to be contained in a ‘div’ or ‘Fragment’ tag, because JSX requires that a component return only one element.
Chrome Dev Tools Device Toolbar
When a project is local, we need to see how it looks on other devices without the trouble of actually viewing it on other devices. Luckily, Google Chrome offers a great solution.
Through Dev Tools, we can toggle the Device Toolbar. This toolbar gives us a number of preset mobile devices to choose for our screen to emulate or we can provide exact dimensions for the screen.
There are a few ways we can open Chrome Dev Tools in our browser:
- Right click on the page and click ‘Inspect’.
- Press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).
- Press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS).
Once Dev Tools are open, click the second left-most button at the top of the Dev Tools window. The button looks like two different sized mobile devices and says ‘Toggle device toolbar’ on hover. This changes the browser view and opens the Device Toolbar. The Device Toolbar is where we can select different devices to emulate.
These tools should be all you need to make assure that your app looks great from any device.
