Top React Libraries — Media Queries and Autosuggest

Photo by Anna Pelzer on Unsplash

To make developing React apps easier, we can add some libraries to make our lives easier.

In this article, we’ll look at some popular libraries for React apps.

react-responsive

The react-responsive package can detect screen sizes based on media queries.

We can install it by running:

npm i react-responsive

Then we can use it by writing:

import React from "react";
import { useMediaQuery } from "react-responsive";
export default function App() {
  const isDesktopOrLaptop = useMediaQuery({
    query: "(min-device-width: 1200px)"
  });
  const isBigScreen = useMediaQuery({ query: "(min-device-width: 1800px)" });
  const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1200px)" });
  const isTabletOrMobileDevice = useMediaQuery({
    query: "(max-device-width: 1200px)"
  });
  const isPortrait = useMediaQuery({ query: "(orientation: portrait)" });
  const isRetina = useMediaQuery({ query: "(min-resolution: 2dppx)" });
  return (
    <div>
      {isDesktopOrLaptop && (
        <>
          <p>desktop or laptop</p>
          {isBigScreen && <p>big screen</p>}
          {isTabletOrMobile && <p>tablet or mobile phone</p>}
        </>
      )}…