---
title: "Measure the Screen Size Using react-responsive"
date: 2023-07-03T10:45:11.000Z
author: Z.SHINCHVEN
tags: [React, react-responsive, query media]
canonical: https://atlassc.net/2023/07/03/measure-screen-size-using-react-responsive
---
[react-responsive](https://www.npmjs.com/package/react-responsive) is a lightweight and straightforward package that enables you to do media queries by using the `useMediaQuery` hook. It helps measure screen size and other screen features, making it an essential tool for responsive web development.

## Installation

```bash
npm install react-responsive
```

## Usage

```jsx
import React from 'react'
import { useMediaQuery } from 'react-responsive'

const Example = () => {

  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })
  const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1224px)' })
  const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })

  return <div>
    <h1>Device Test!</h1>
    {isDesktopOrLaptop && <p>You are a desktop or laptop</p>}
    {isBigScreen && <p>You  have a huge screen</p>}
    {isTabletOrMobile && <p>You are a tablet or mobile phone</p>}
    <p>Your are in {isPortrait ? 'portrait' : 'landscape'} orientation</p>
    {isRetina && <p>You are retina</p>}
  </div>
}
```

## Wrapping Components

```jsx
import MediaQuery from 'react-responsive'

const Example = () => (
  <div>
    <h1>Device Test!</h1>
    <MediaQuery minWidth={1224}>
      <p>You are a desktop or laptop</p>
      <MediaQuery minWidth={1824}>
        <p>You also have a huge screen</p>
      </MediaQuery>
    </MediaQuery>
    <MediaQuery minResolution="2dppx">
      {/* You can also use a function (render prop) as a child */}
      {(matches) =>
        matches
          ? <p>You are retina</p>
          : <p>You are not retina</p>
      }
    </MediaQuery>
  </div>
)
```