react-responsive

Information

Package	react-responsive
Description	Media queries in react for responsive design
Browser Version	>= IE6*
Demo

The best supported, easiest to use react media query module.

Install

1$ npm install react-responsive --save

Example Usage

With Hooks

Hooks is a new feature available in 8.0.0!

1import React from 'react'
2import { useMediaQuery } from 'react-responsive'
3
4const Example = () => {
5  const isDesktopOrLaptop = useMediaQuery({
6    query: '(min-width: 1224px)'
7  })
8  const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
9  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
10  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
11  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })
12
13  return (
14    <div>
15      <h1>Device Test!</h1>
16      {isDesktopOrLaptop && <p>You are a desktop or laptop</p>}
17      {isBigScreen && <p>You have a huge screen</p>}
18      {isTabletOrMobile && <p>You are a tablet or mobile phone</p>}
19      <p>Your are in {isPortrait ? 'portrait' : 'landscape'} orientation</p>
20      {isRetina && <p>You are retina</p>}
21    </div>
22  )
23}

With Components

1import MediaQuery from 'react-responsive'
2
3const Example = () => (
4  <div>
5    <h1>Device Test!</h1>
6    <MediaQuery minWidth={1224}>
7      <p>You are a desktop or laptop</p>
8      <MediaQuery minWidth={1824}>
9        <p>You also have a huge screen</p>
10      </MediaQuery>
11    </MediaQuery>
12    <MediaQuery minResolution="2dppx">
13      {/* You can also use a function (render prop) as a child */}
14      {(matches) =>
15        matches ? <p>You are retina</p> : <p>You are not retina</p>
16      }
17    </MediaQuery>
18  </div>
19)

API

Using Properties

To make things more idiomatic to react, you can use camel-cased shorthands to construct media queries.

For a list of all possible shorthands and value types see https://github.com/yocontra/react-responsive/blob/master/src/mediaQuery.ts#L9.

Any numbers given as shorthand will be expanded to px (1234 will become '1234px').

The CSS media queries in the example above could be constructed like this:

1import React from 'react'
2import { useMediaQuery } from 'react-responsive'
3
4const Example = () => {
5  const isDesktopOrLaptop = useMediaQuery({ minWidth: 1224 })
6  const isBigScreen = useMediaQuery({ minWidth: 1824 })
7  const isTabletOrMobile = useMediaQuery({ maxWidth: 1224 })
8  const isPortrait = useMediaQuery({ orientation: 'portrait' })
9  const isRetina = useMediaQuery({ minResolution: '2dppx' })
10
11  return <div>...</div>
12}

Forcing a device with the device prop

At times you may need to render components with different device settings than what gets automatically detected. This is especially useful in a Node environment where these settings can't be detected (SSR) or for testing.

Possible Keys

orientation, scan, aspectRatio, deviceAspectRatio, height, deviceHeight, width, deviceWidth, color, colorIndex, monochrome, resolution and type

Possible Types

type can be one of: all, grid, aural, braille, handheld, print, projection, screen, tty, tv or embossed

Note: The device property always applies, even when it can be detected (where window.matchMedia exists).

1import { useMediaQuery } from 'react-responsive'
2
3const Example = () => {
4  const isDesktopOrLaptop = useMediaQuery(
5    { minDeviceWidth: 1224 },
6    { deviceWidth: 1600 } // `device` prop
7  )
8
9  return (
10    <div>
11      {isDesktopOrLaptop && (
12        <p>
13          this will always get rendered even if device is shorter than 1224px,
14          that's because we overrode device settings with 'deviceWidth: 1600'.
15        </p>
16      )}
17    </div>
18  )
19}

Supplying through Context

You can also pass device to every useMediaQuery hook in the components tree through a React Context. This should ease up server-side-rendering and testing in a Node environment, e.g:

Server-Side Rendering

1import { Context as ResponsiveContext } from 'react-responsive'
2import { renderToString } from 'react-dom/server'
3import App from './App'
4
5...
6  // Context is just a regular React Context component, it accepts a `value` prop to be passed to consuming components
7  const mobileApp = renderToString(
8    <ResponsiveContext.Provider value={{ width: 500 }}>
9      <App />
10    </ResponsiveContext.Provider>
11  )
12...

If you use next.js, structure your import like this to disable server-side rendering for components that use this library:

1import dynamic from 'next/dynamic'
2const MediaQuery = dynamic(() => import('react-responsive'), {
3  ssr: false
4})

Testing

1import { Context as ResponsiveContext } from 'react-responsive'
2import { render } from '@testing-library/react'
3import ProductsListing from './ProductsListing'
4
5describe('ProductsListing', () => {
6  test('matches the snapshot', () => {
7    const { container: mobile } = render(
8      <ResponsiveContext.Provider value={{ width: 300 }}>
9        <ProductsListing />
10      </ResponsiveContext.Provider>
11    )
12    expect(mobile).toMatchSnapshot()
13
14    const { container: desktop } = render(
15      <ResponsiveContext.Provider value={{ width: 1000 }}>
16        <ProductsListing />
17      </ResponsiveContext.Provider>
18    )
19    expect(desktop).toMatchSnapshot()
20  })
21})

Note that if anything has a device prop passed in it will take precedence over the one from context.

onChange

You can use the onChange callback to specify a change handler that will be called when the media query's value changes.

1import React from 'react'
2import { useMediaQuery } from 'react-responsive'
3
4const Example = () => {
5  const handleMediaQueryChange = (matches) => {
6    // matches will be true or false based on the value for the media query
7  }
8  const isDesktopOrLaptop = useMediaQuery(
9    { minWidth: 1224 },
10    undefined,
11    handleMediaQueryChange
12  )
13
14  return <div>...</div>
15}

1import React from 'react'
2import MediaQuery from 'react-responsive'
3
4const Example = () => {
5  const handleMediaQueryChange = (matches) => {
6    // matches will be true or false based on the value for the media query
7  }
8
9  return (
10    <MediaQuery minWidth={1224} onChange={handleMediaQueryChange}>
11      ...
12    </MediaQuery>
13  )
14}

Easy Mode

That's it! Now you can create your application specific breakpoints and reuse them easily. Here is an example:

1import { useMediaQuery } from 'react-responsive'
2
3const Desktop = ({ children }) => {
4  const isDesktop = useMediaQuery({ minWidth: 992 })
5  return isDesktop ? children : null
6}
7const Tablet = ({ children }) => {
8  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 })
9  return isTablet ? children : null
10}
11const Mobile = ({ children }) => {
12  const isMobile = useMediaQuery({ maxWidth: 767 })
13  return isMobile ? children : null
14}
15const Default = ({ children }) => {
16  const isNotMobile = useMediaQuery({ minWidth: 768 })
17  return isNotMobile ? children : null
18}
19
20const Example = () => (
21  <div>
22    <Desktop>Desktop or laptop</Desktop>
23    <Tablet>Tablet</Tablet>
24    <Mobile>Mobile</Mobile>
25    <Default>Not mobile (desktop or laptop or tablet)</Default>
26  </div>
27)
28
29export default Example

And if you want a combo (the DRY way):

1import { useMediaQuery } from 'react-responsive'
2
3const useDesktopMediaQuery = () =>
4  useMediaQuery({ query: '(min-width: 1280px)' })
5
6const useTabletAndBelowMediaQuery = () =>
7  useMediaQuery({ query: '(max-width: 1279px)' })
8
9const Desktop = ({ children }) => {
10  const isDesktop = useDesktopMediaQuery()
11
12  return isDesktop ? children : null
13}
14
15const TabletAndBelow = ({ children }) => {
16  const isTabletAndBelow = useTabletAndBelowMediaQuery()
17
18  return isTabletAndBelow ? children : null
19}

Browser Support

Out of the box

Chrome	9
Firefox (Gecko)	6
MS Edge	All
Internet Explorer	10
Opera	12.1
Safari	5.1

With Polyfills

Pretty much everything. Check out these polyfills:

• matchMedia.js by Paul Irish
• media-match (faster, but larger and lacking some features)