Responsive Web Design, the Easy Way

·

4 min read

IMPORTANT NOTE: The code and examples have been tested and work with the latest versions of React and styled components.

I recently fully converted my blog app with styled components and am loving the number of complex functions one can add, from state management with props, to implementing conditions on the CSS part.

At first, I was using raw media queries for responsive design. The code took more than 1000 lines, but what I am about to show you solves this problem. Let's get into the code.

Step ONE:(Pre-requisites)

— If you already use the styled-components npm package to render your CSS, skip this step. If not, install the styled-components package.

Make sure that you are in the correct project folder on your command prompt terminal, and type this command.

npm install styled-components

Step TWO: Import the styled-components package into your file

Add the following code to create a component, that we will use as our demonstration application.

import React from “react.”



//when the default export comes before the class components, it works just fine

export default class Home extends React.Component{
       render(){
         return(
                  <>
                      <div>
                         <h1>this is a demo page</h1>
                     </div>
                  </>
                  )
     }
}

Now add the styled-components package into the code.

import React from 'react'

//this line imports the styled-components package

import styled  from “styled-components”


//when the default export comes before the class components it works just fine

export default class Home extends React.Component{
       render(){
         return(
                  <>
                      <div>
                         <h1>this is a demo page</h1>
                     </div>
                  </>
                  )
     }
}

Now let's add our CSS using styled components.

import React from 'react'

//this line imports the styled-components package
import styled  from “styled-components”

  //this line creates a store for storing the styles for our h1
const H1=styled.h1`
font-family:helvetica;
font-size:35px;
position:absolute;
left:25%;
`

//when the default export comes before the class components it works just fine
export default class Home extends React.Component{
       render(){
         return(
                  <>
                      <div>
                         <H1>this is a demo page</H1>
                     </div>
                  </>
                  )
     }
}

Step THREE: Creating the responsive hook handler.

The trick you all are waiting for is the responsive handler; let's create it. First, define the breakpoints for the screen to be targeted.

//640 is for small screens,768 for medium screens and tablets for 1024.

const breakpoints=[640,768,1024,1280];

Then, add the handler which implements the media queries to the file.

The hook uses the .map function to illiterate through the defined breakpoints and set them to our media query.

const mq=breakpoints.map(
bp=>`@media screen and (max-width:${bp}px)`
)

Let's add the code to our index.js file.

import React from 'react'

//This line imports the styled-components package.
import styled  from “styled-components”

//This line creates an array of brake points.
const breakpoints=[640,768,1024,1280]

const mq=breakpoints.map(
bp=>`@media screen and (max-width:${bp}px)`
)

  //This line creates a store for storing the styles for our h1.
const H1=styled.h1`
font-family:helvetica;
font-size:35px;
position:absolute;
left:25%;
`

//When the default export comes before the class components it works just fine
export default class Home extends React.Component{
       render(){
         return(
                  <>
                      <div>
                         <H1>this is a demo page</H1>
                     </div>
                  </>
                  )
     }
}

We are almost there. We need to use our code to get the responsive effect. Let's destructure the 'mq' method created in the hook and use it in our index file. We will use the first two breakpoints that give us a small and medium screen, respectively.

import React from 'react'

//this line imports the styled-components package
import styled  from “styled-components”

//this line creates an array of brake points
const breakpoints=[640,768,1024,1280]

const mq=breakpoints.map(
bp=>`@media screen and (max-width:${bp}px)`
)

  //this line creates a store for storing the styles for our h1
const H1=styled.h1`
font-family:helvetica;
font-size:35px;
position:absolute;
left:25%;

${mq[0,1]}{
font-size:30px;
color: red;
`

//when the default export comes before the class components it works just fine
export default class Home extends React.Component{
       render(){
         return(
                  <>
                      <div>
                         <H1>this is a demo page</H1>
                     </div>
                  </>
                  )
     }
}

The hook we have created, can be reused in all other files in our project without the need to recreate it. Add "export" to the store that we had created earlier.

//export enables the importation of components

export const mq=breakpoints.map(
bp=>`@media screen and (max-width:${bp}px)`
)

Much can be achieved using the method we created with minimum lines of code.

I hope you enjoy React and its advantage to front-end development. In our next tutorial, I will show you how to use props and manage the state of the user interface for good UX. Thanks a lot for reading this far.

References

  1. Published at topcoder