Must-Know React Hook for Mobile-First Web Applications

Image

Are you a full-stack or front-end developer creating mobile-friendly applications? Have you ever struggled to display specific content on a web page while showing different content on a mobile device?

If so, you should know about the useMediaQuery hook! This hook enables you to render content conditionally based on screen size easily.

How to Use the useMediaQuery Hook (Using Library)

Step 1: Install the usehooks-ts Library

Use your package manager to install the usehooks-ts library:npm i usehooks-ts

npm i usehooks-ts

Step 2: Import and Use the Hook

Here’s an example of how to use the useMediaQuery

export default function Component() {
 const matches = useMediaQuery('(min-width: 768px)')

 return (
 <div>
 {`You're vieweing on ${matches ? 'Desktop device' : 'Mobile device'}`}
 </div>
 )
}

Custom Implementation

If you prefer not to use a third-party library like usehooks-ts, you can create your own custom implementation of the useMediaQuery hook:

import { useState, useEffect } from "react";

export const useMediaQuery = () => {
 // Breakpoints for min-width
 const breakPoints = {
 mobile: 600,
 tablet: 1024,
 laptop: 1280,
 largeDesktops: 1441,
 };

 const findMyDevice = (width) => {
 if (width <= breakPoints.mobile) {
 return "mobile";
 } else if (width <= breakPoints.tablet) {
 return "tablet";
 } else if (width <= breakPoints.laptop) {
 return "laptop";
 } else if (width <= breakPoints.largeDesktops) {
 return "largeDesktops";
 } else {
 return "extraLargeScreens";
 }
 };

 const [device, setDevice] = useState(() =>
 typeof window !== "undefined" ? findMyDevice(window.innerWidth) : "unknown"
 );

 useEffect(() => {
 const handleResize = () => {
 setDevice(findMyDevice(window.innerWidth));
 };
 // event which will listen to window resize and return device accordingly
 window.addEventListener("resize", handleResize);
 return () => window.removeEventListener("resize", handleResize);
 }, []);

 return device;
};

Usage Example

Here’s how you can use the custom useMediaQuery hook in a React component:

import React from "react";
import { useMediaQuery } from "./hooks/useMediaQuery";

const ResponsiveComponent = () => {
 const device = useMediaQuery();

 return (
 <div>
 <h1>Responsive Device Detector</h1>
 <p>You're currently using a: <strong>{device}</strong> device.</p>
 </div>
 );
};

export default App;

Key Takeaways

  • The useMediaQuery hook is a powerful tool for creating responsive web applications.
  • You can either use a prebuilt library like usehooks-ts or define your own custom implementation.
  • This approach ensures your application adapts seamlessly to different screen sizes, improving the user experience.

Queries and Doubts

Thanks for the read :) Hope you have enjoyed reading it 🤩 and learnt something new today.

If you have any doubts or queries feel free to drop a comment or

⁍ Connect with me on my 🔗Topmate 💬.

⁍ You can also reach out to me on my 🔗LinkedIn.

⁍ Please clap for this post if you enjoyed reading it 📗 and follow for more interesting articles.

⁍ You can also support me and my writings by treating me to a nice virtual cup of coffee ☕️.