We all love our websites to adapt to whatever screen size we load it on, the most annoying part of visiting a website; especially on mobile, is seeing the screen not adapting, or the buttons being out of place, or the navbar stretching out the entire screen! It's not a pleasant experience.
React is the second most popular web framework in the entire web development history. Falling behind only to Nodejs. it's important to know responsive coding practices with React as a front-end developer.
Key factors that go into Responsive design
Responsiveness is all about flexibility, flexible layouts are a very key factor when considering responsive programming. A flexible layout would mean your web page would look good on larger and smaller screens.
Media queries are something we'll talk about later on; it's a CSS3 feature that's basically a lifesaver to most front-end developers back in the day, and even now. It means that you apply different CSS rules for different screen sizes.
Navigation is a major factor when it comes to the responsiveness of a website, for a desktop, you'll have a horizontal list of buttons that must fit the screen, be it a laptop, a tablet or a mobile device. For mobile, the navigation bar; or nav bar will collapse into a menu that will slide out in a vertical order.
Responsive programming with React-Responsive
To begin your responsive journey with React, you have to introduce the React-Responsive library. This library makes it easy to apply several responsive components based on screen size, quite similar to media queries.
With the React Responsive library, you get to wrap your existing react components, then apply the appropriate styles based on the screen size, this is where it gets better than media queries, since with that, you'll have to manually create each rule for different screen sizes.
Get Started With React-Responsive
To use the React-Responsive library, you have to get the node package manager, npm. You can install it automatically by downloading NodeJs.
Once node is installed you can go ahead and run npm in your command line, and type the following command:
npm install --save react-responsive
The library will go ahead and install itself on your computer and you'll be ready to write some code!
Oh, and react-response can be used with Hooks, and components as well.
Using React-Responsive With Hooks
The next step is to access your app.js file and define some necessary media query hooks to check the screen size of the device then will display different layouts or codes based on the results of the media query checks.
import React from 'react'
import {useMediaQuery} from 'react-responsive'
const Example = () => {
const isBigScreen = useMediaQuery({ query: '(min-width:1025px)'})
const isTabletOrMobile = useMediaQuery({ query: '(max-width:768px)'})
const isPotrait = useMediaQuery({ query: '(orientation: potrait)'})
const isRetina = useMediaQuery({ query: '(min-resolution:3dppx)'})
return <div>
<h1>Device Test</h1>
{isBigScreen && <p>You have a big screen}
{isTabletOrMobile && <p>You are using a tablet or a mobile}
{you are in {isPotrait ? 'portrait' : 'landscape'} mode</p>
{isRetina && <p>You are using the min ppx}
</div>
}
This is a basic react code that tests the device screen size you're using, if your screen meets the basic requirements, the query will run and display any of the following.
If you're using a desktop, it'll just display you have a big screen, same with a mobile device, or a tablet.
Using React-Responsive With Components
To use with components we'll have to import the MediaQuery component from the react-responsive library for us to work our magic.
<h1>Device Test!</h1>
<MediaQuery minWidth={1025}>
<p>You are a desktop or laptop</p>
<MediaQuery minWidth={1824}>
<p>You also have a huge screen</p>
</MediaQuery>
</MediaQuery>
<MediaQuery minResolution="2dppx">
{(matches) =>
matches
? <p>You are retina</p>
: <p>You are not retina</p>
}
</MediaQuery>
</div>
)
Of course, these are just tests, and with this backbone, you can create more advanced apps with react-responsive, taking advantage of the mediaQuery components, and hooks.
Benefits of using React-Responsive
Reusability is a major advantage of using the react library, it can be easily reused in different parts of the project, without having to re-write the same thing over and over.
Another major factor would be simplicity, defining a new set of rules and styles for different screen sizes can be very long code, that is hard to maintain, with the simplified code of react-responsive you write less, and get more done.
If you love strong community support for every library you use then don't even worry, react has a wide community, so you can rest easy knowing React-responsive is backed by many talented developers.
If you found this article very helpful, I'd love to connect with you through Twitter. Thanks for reading Nerds, till next time!