Need help with react-responsive?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

contra
5.8K Stars 284 Forks MIT License 320 Commits 12 Opened issues

Description

CSS media queries in react - for responsive design, and more.

Services available

!
?

Need anything else?

Contributors list

# 3,099
uber
compass
coffees...
node-js
128 commits
# 85,414
HTML
input-m...
TypeScr...
30 commits
# 90,244
TypeScr...
Redux
whatwg-...
fetch-a...
8 commits
# 4,194
Storybo...
gulp-pl...
watch-f...
lodash
5 commits
# 110,666
React
Markdow...
Jekyll
webmidi
5 commits
# 17,704
pytorch
html5
robust
lodash
4 commits
# 91,407
Rails
React
HTML
iphone-...
4 commits
# 74,158
Rails
GraphQL
Markdow...
gitlab
4 commits
# 252,876
JavaScr...
TypeScr...
4 commits
# 225,353
CSS
Shell
content...
React
4 commits
# 8,015
React
sketch-...
sketch-...
vercel
3 commits
# 7,994
node
tilemap
cms-fra...
GraphQL
2 commits
# 249,248
React
Firebas...
redux-o...
redux-t...
2 commits
# 307,206
CSS
Django
HTML
2 commits
# 40,031
React
React N...
horizon
js
2 commits
# 25,588
src
HTML
TypeScr...
Ember
2 commits
# 308,140
React
tagging
Shell
HTML
2 commits
# 30,760
Markdow...
reactjs
text-ed...
webpack...
2 commits
# 181,179
CSS
HTML
React
Twitch
1 commit
# 251,152
Node.js
Gulp
GraphQL
knex
1 commit

react-responsive NPM version Downloads

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

$ npm install react-responsive --save

Example Usage

With Hooks

Hooks is a new feature available in 8.0.0!

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

const Example = () => { 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

Device Test!

{isDesktopOrLaptop &&

You are a desktop or laptop

} {isBigScreen &&

You have a huge screen

} {isTabletOrMobile &&

You are a tablet or mobile phone

}

Your are in {isPortrait ? 'portrait' : 'landscape'} orientation

{isRetina &&

You are retina

}
}

With Components

import MediaQuery from 'react-responsive'

const Example = () => (

Device Test!

You are a desktop or laptop

You also have a huge screen

{/* You can also use a function (render prop) as a child */} {(matches) => matches ?

You are retina

:

You are not retina

}
)

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/contra/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:

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

const Example = () => { const isDesktopOrLaptop = useMediaQuery({ minWidth: 1224 }) const isBigScreen = useMediaQuery({ minWidth: 1824 }) const isTabletOrMobile = useMediaQuery({ maxWidth: 1224 }) const isPortrait = useMediaQuery({ orientation: 'portrait' }) const isRetina = useMediaQuery({ minResolution: '2dppx' })

return (

...
) }

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).
import { useMediaQuery } from 'react-responsive'

const Example = () => { const isDesktopOrLaptop = useMediaQuery( { minDeviceWidth: 1224 }, { deviceWidth: 1600 } // device prop )

return (

{isDesktopOrLaptop &&

this will always get rendered even if device is shorter than 1224px, that's because we overrode device settings with 'deviceWidth: 1600'.

}
) }

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
import { Context as ResponsiveContext } from 'react-responsive'
import { renderToString } from 'react-dom/server'
import App from './App'

... // Context is just a regular React Context component, it accepts a value prop to be passed to consuming components const mobileApp = renderToString( <responsivecontext.provider value="{{" width:> </responsivecontext.provider> ) ...

Testing
import { Context as ResponsiveContext } from 'react-responsive'
import { render } from '@testing-library/react'
import ProductsListing from './ProductsListing'

describe('ProductsListing', () => { test('matches the snapshot', () => { const { container: mobile } = render( <responsivecontext.provider value="{{" width:> </responsivecontext.provider> ) expect(mobile).toMatchSnapshot()

const { container: desktop } = render(
  <responsivecontext.provider value="{{" width:>
    <productslisting></productslisting>
  </responsivecontext.provider>
)
expect(desktop).toMatchSnapshot()

}) })

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.
import React from 'react'
import { useMediaQuery } from 'react-responsive'

const Example = () => {

const handleMediaQueryChange = (matches) => { // matches will be true or false based on the value for the media query } const isDesktopOrLaptop = useMediaQuery( { minWidth: 1224 }, undefined, handleMediaQueryChange );

return (

...
) }
import React from 'react'
import MediaQuery from 'react-responsive'

const Example = () => {

const handleMediaQueryChange = (matches) => { // matches will be true or false based on the value for the media query }

return ( ... ) }

Easy Mode

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

import { useMediaQuery } from 'react-responsive'

const Desktop = ({ children }) => { const isDesktop = useMediaQuery({ minWidth: 992 }) return isDesktop ? children : null } const Tablet = ({ children }) => { const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 }) return isTablet ? children : null } const Mobile = ({ children }) => { const isMobile = useMediaQuery({ maxWidth: 767 }) return isMobile ? children : null } const Default = ({ children }) => { const isNotMobile = useMediaQuery({ minWidth: 768 }) return isNotMobile ? children : null }

const Example = () => (

Desktop or laptop Tablet Mobile Not mobile (desktop or laptop or tablet)
)

export default Example

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

import { useMediaQuery } from "react-responsive"

const useDesktopMediaQuery = () => useMediaQuery({ query: "(min-width: 1280px)" })

const useTabletAndBelowMediaQuery = () => useMediaQuery({ query: "(max-width: 1279px)" })

const Desktop = ({ children }) => { const isDesktop = useDesktopMediaQuery()

return isDesktop ? children : null }

const TabletAndBelow = ({ children }) => { const isTabletAndBelow = useTabletAndBelowMediaQuery()

return isTabletAndBelow ? children : null }

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:

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.