How to adapt to screen size with React

Key takeaways:

• A responsive website is essential for customer satisfaction, particularly in e-commerce sites, where poor experiences can result in lost purchases.

• Use CSS media queries, React hooks, or third-party libraries like react-responsive to develop responsive layouts.

• Consider your application's specific needs and preferences while choosing the right approach.

Responsive design ensures that a website adapts seamlessly to various screen sizes, providing an optimal user experience across devices.

Consider a scenario where a user browses an online store on their desktop and later switches to their phone. If the website isn’t optimized for smaller screens, such as having oversized images or unreadable text, the user may become frustrated and abandon the site.

This is especially critical in e-commerce, where poor usability can directly impact sales.

Customers expect a smooth experience on a desktop, tablet, or mobile device. If a site fails to deliver, users may not complete their purchases. To address this, developers can use tools like React to build responsive user interfaces that adapt to different devices.

By ensuring consistent design and functionality, businesses can keep users engaged and improve conversion rates.

Understanding screen size: Physical dimensions vs. viewport

Screen size refers to the physical dimensions of a display device, which is usually measured diagonally in inches. For example, a 40-inch TV has a screen size that measures 40 inches from one corner to the opposite corner.

On the other hand, screen size refers to a device's viewport dimensions in the context of web development and responsive design. It is the space on a device’s screen where web content is shown. Screen size is measured in pixels. It affects how much content can fit on the screen at once and how it should be laid out to be readable and usable.

Adapting to screen sizes with React

We can use CSS media queries, React hooks, or third-party libraries like react-responsive to adapt to different screen sizes in a React application. In this Answer, we will discuss React hooks and react-responsive  to demonstrate how to adapt to different screen sizes.

Code example using react-responsive

In the following example, we’ll use the react-responsive library to illustrate how you can adapt to screen size in React:

Code explanation

• In App.js file:

  • Line 1: We import React to use JSX and React hooks.

  • Line 2: We import useMediaQuery from react-responsive to handle media queries.

  • Lines 4–7: We declare a functional component named App. We define media queries based on the output area's width. We are detecting the output area as a screen. These media queries will determine whether the viewport is desktop, tablet, or mobile.

  • Lines 9–19: This code renders a different message based on whether the screen width is detected as desktop, tablet, or mobile.

• In index.js file:

  • Line 1: We import React and StrictMode.

  • Line 2: We import createRoot from react-dom/client to render the React application.

  • Lines 3–4: We import a CSS file for styling and the App component from App.js.

  • Lines 6–11: This code initializes the React application by rendering the App component inside a StrictMode wrapper at the DOM element with the ID root in index.html file.

Code example using React hooks

In the following example, we’ll use React hooks to illustrate how you can adapt to screen size in React:

Code explanation

• In useWindowSize.js custom hook:

  • Line 1: We import the useState and useEffect hooks.

  • Lines 4–7: We initialize a state variable size with the current window width and height using useState.

  • Lines 9–19: We set up an effect with useEffect to update the size state whenever the window is resized, adding and cleaning up the event listener.

  • Line 21: We return the current window size as an object containing width and height.

• In App.js file:

  • Line 2: We import useWindowSize custom hook from the hooks directory.

  • Lines 4–5: We declare a functional component named App. It uses the useWindowSize hook to get the current window width.

  • Lines 7–16: We render content based on screen width.

• In index.js file:

  • Lines 1–4: We import the necessary modules, styles, and the App component for rendering the React application.

  • Lines 6–11: This code initializes and renders the App component wrapped in StrictMode at the DOM element with the ID root.

Choosing the right approach

1. React Hooks (useWindowSize):

   1. Best for: Real-time UI updates based on window size changes.

   2. Advantages: Dynamic and highly responsive to user actions.

2. react-responsive library:

   1. Best for: Handling different layouts for predefined screen sizes (desktop, tablet, mobile).

   2. Advantages: Easy to implement and ideal for straightforward responsive design needs.

Choose the approach that best fits your application's requirements.

Conclusion

By understanding and implementing responsive design techniques in React, developers can build applications that automatically adjust to various screen sizes, ensuring an optimal user experience across desktops, tablets, and mobile devices.