|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.
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 queryconst isDesktopOrLaptop =;return<div>...</div>
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 queryreturn<MediaQuery = =>...</MediaQuery>
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: