4 Techniques to Implement Responsive Layouts in React

Today's websites must be responsive and display correctly on various devices, from large desktop screens to small mobile phones.

React is a popular JavaScript library for building user interfaces, and it offers a variety of ways to implement responsive layouts.

In this blog post, we'll explore four different techniques for creating responsive layouts in React using:

• CSS media queries

• The react-responsive library

• The react-grid-system library

• The react-with-breakpoint utility

Each approach has its benefits and trade-offs, so it's ideal to employ a technique that works well for your project.

Using CSS Media Queries

To implement responsive layouts in React using CSS media queries, you can use the @media rule in your CSS stylesheets to apply different styles based on the viewport's dimensions. Here is an example of how you could use media queries to change the layout of a component when the viewport is smaller than a certain width:

.container {
  display: flex;
  flex-direction: row;
}

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

In this example, the .container element is displayed as a row on larger screens, but on smaller screens (with a viewport width of 600 pixels or less), the layout is changed to a column.

To apply these styles in your React component, you can import the CSS file or use the style prop to apply the styles inline. Here is an example of how you can use it:

import React from 'react';

const Container = ({ children }) => {
  return (
    <div className="container" style={{ display: 'flex', flexDirection: 'row' }}>
      {children}
    </div>
  );
};

export default Container;

In this example, the Container component is a responsive container that displays its children in a row on larger screens but can be customized with media queries or other styles to change the layout on smaller screens.

You can also use the useMediaQuery hook from the @material-ui/core library to apply responsive styles based on media queries in your functional components. Here is an example of how you could use the useMediaQuery hook:

import React from 'react';
import { useMediaQuery } from '@material-ui/core';

const Container = ({ children }) => {
  const isSmallScreen = useMediaQuery('(max-width: 600px)');
  return (
    <div
      className="container"
      style={{ display: 'flex', flexDirection: isSmallScreen ? 'column' : 'row' }}
    >
      {children}
    </div>
  );
};

export default Container;

In this example, the isSmallScreen variable is true when the viewport is 600 pixels or less and false otherwise. This value is used to determine the flexDirection of the .container element, resulting in a responsive layout that changes based on the viewport width.

React Responsive

The react-responsive library provides a simple way to apply responsive styles in your React components based on the viewport's dimensions. To use the library, you will need to install it first:

npm install react-responsive

Then, you can use the MediaQuery component to apply responsive styles based on media queries. The MediaQuery component takes a query prop that specifies the media query to use and the children rendered when the media query is true.

Here is an example of how you could use the MediaQuery component to create a responsive layout in React:

import React from 'react';
import MediaQuery from 'react-responsive';

const Container = ({ children }) => {
  return (
    <div className="container">
      <MediaQuery query="(min-width: 600px)">
        {/* styles for large screens go here */}
        <div style={{ display: 'flex', flexDirection: 'row' }}>{children}</div>
      </MediaQuery>
      <MediaQuery query="(max-width: 599px)">
        {/* styles for small screens go here */}
        <div style={{ display: 'flex', flexDirection: 'column' }}>{children}</div>
      </MediaQuery>
    </div>
  );
};

export default Container;

In this example, the Container component has two media queries: one for large screens (min-width: 600px) and one for small screens (max-width: 599px). The styles for each media query are applied to the children of the MediaQuery component, resulting in a responsive layout that changes based on the viewport width.

You can also use the react-responsive library to apply responsive styles based on other dimensions, such as the device type (e.g., print, screen, etc.), the aspect ratio, and more. For more information, you can refer to the react-responsive documentation.

React Grid System

To implement a responsive layout in a React application using the React Grid System, follow these steps:

1. Install the React Grid System library by running the following command in your terminal:

   npm install react-grid-system
   

2. Import the Container, Row, and Col components from the React Grid System library in your React component

   import { Container, Row, Col } from 'react-grid-system';
   

3. Use the Container component to wrap your layout. This component provides a responsive container for your layout.

4. Use the Row and Col components to create a grid layout. The Row component represents a row in the grid, and the Col component defines a column. You can specify the width of each column using the xs, sm, md, lg, and xl props. These props correspond to the different screen sizes and allow you to specify different column widths for different screen sizes.

For example, the following code creates a layout with two columns, where the first column takes up 6 columns on small screens and 4 on larger screens. The second column takes up 6 columns on small screens and 8 columns on larger screens:

<Container>
  <Row>
    <Col xs={6} sm={4}>Column 1</Col>
    <Col xs={6} sm={8}>Column 2</Col>
  </Row>
</Container>

You can also use the offset prop to offset a column by a certain number of columns.

For example, the following code creates a layout with two columns, where 4 columns on small screens offset the first column. The second column takes up 8 columns on small screens and 6 columns on larger screens:

<Container>
  <Row>
    <Col xs={8} sm={6} offset={{ sm: 4 }}>Column 1</Col>
    <Col xs={4} sm={6}>Column 2</Col>
  </Row>
</Container>

You can find more information and examples in the React Grid System documentation.

Using React with Breakpoint

To implement a responsive layout in a React application using React with Breakpoint, you can follow these steps:

1. Install the React with Breakpoint library by running the following command in your terminal:

   npm install react-with-breakpoint
   

2. Import the BreakpointProvider and Responsive components from the React with Breakpoint library in your React component:

   import { BreakpointProvider, Responsive } from 'react-with-breakpoint';
   

3. Use the BreakpointProvider component to wrap your layout. This component provides a responsive context for your layout and allows you to specify the breakpoints you want to use.

4. Use the Responsive component to specify how your layout should respond to different breakpoints. The Responsive component takes a breakpoint prop that defines the breakpoint at which the layout should change. You can specify multiple Responsive components for different breakpoints.

For example, the following code creates a layout with two columns that stack vertically on small screens and are side-by-side on larger screens:

<BreakpointProvider breakpoints={{ small: 0, medium: 768 }}>
  <Responsive breakpoint="small">
    <div>Column 1</div>
    <div>Column 2</div>
  </Responsive>
  <Responsive breakpoint="medium">
    <div style={{ width: '50%', float: 'left' }}>Column 1</div>
    <div style={{ width: '50%', float: 'left' }}>Column 2</div>
  </Responsive>
</BreakpointProvider>

Takeaway: Build Your React App the Right Way

The techniques above barely cover responsive layouts in React. As React continues to advance and push the front-end development limits, we must reevaluate and reconsider our previous ways of thinking.

If you are already familiar and comfortable with using Media Queries, you can continue to do so. However, as an increasing number of developers are adopting a CSS-in-JS approach, you want to employ modern strategies that will improve the responsive design of your React app.