|Description||Media queries in react for responsive design|
|Browser Version||>= IE6*|
The best supported, easiest to use react media query module.
$ npm install react-responsive --save
Hooks is a new feature available in 8.0.0!
import React from 'react'import useMediaQuery from 'react-responsive'const Example =const isDesktopOrLaptop =const isBigScreen =const isTabletOrMobile =const isTabletOrMobileDevice =const isPortrait =const isRetina =return<div><h1>Device Test!</h1>isDesktopOrLaptop && <><p>You are a desktop or laptop</p>isBigScreen && <p>You also have a huge screen</p>isTabletOrMobile && <p>You are sized like a tablet or mobile phone though</p></>isTabletOrMobileDevice && <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>
import MediaQuery from 'react-responsive'const Example =<div><h1>Device Test!</h1><MediaQuery = =><p>You are a desktop or laptop</p><MediaQuery =><p>You also have a huge screen</p></MediaQuery></MediaQuery><MediaQuery ='2dppx'>/* You can also use a function (render prop) as a child */matchesmatches? <p>You are retina</p>: <p>You are not retina</p></MediaQuery></div>
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.js#L9.
Any numbers given as shorthand will be expanded to px (
1234 will become
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 =const isBigScreen =const isTabletOrMobile =const isTabletOrMobileDevice =const isPortrait =const isRetina =return<div>...</div>
Forcing a device with the
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.
type can be one of:
device property always applies, even when it can be detected (where window.matchMedia exists).
import useMediaQuery from 'react-responsive'const Example =const isDesktopOrLaptop =return<div>isDesktopOrLaptop &&<p>this will always get rendered even if device is shorter than 1224pxbecause we overrode device settings with 'deviceWidth: 1600'</p></div>
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:
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 componentsconst mobileApp =...
import Context as ResponsiveContext from 'react-responsive'import render from '@testing-library/react'import ProductsListing from './ProductsListing'
Note that if anything has a
device prop passed in it will take precedence over the one from context.
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 = childrenconst isDesktop =return isDesktop ? children : nullconst Tablet = childrenconst isTablet =return isTablet ? children : nullconst Mobile = childrenconst isMobile =return isMobile ? children : nullconst Default = childrenconst isNotMobile =return isNotMobile ? children : nullconst Example =<div><Desktop>Desktop or laptop</Desktop><Tablet>Tablet</Tablet><Mobile>Mobile</Mobile><Default>Not </Default></div>
Out of the box
Pretty much everything. Check out these polyfills: