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 = 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>
With Components
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 */ matches matches ? <p>You are retina</p> : <p>You are not retina</p> </MediaQuery> </div>
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.js#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 = const isBigScreen = const isTabletOrMobile = const isTabletOrMobileDevice = const isPortrait = const isRetina = return <div> ... </div>
device
prop
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.
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 = return <div> isDesktopOrLaptop && <p> this will always get rendered even if device is shorter than 1224px because 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:
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 = ...
Testing
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.
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 = ; 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 query return <MediaQuery = => ... </MediaQuery>
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 = return isDesktop ? children : nullconst Tablet = children const isTablet = return isTablet ? children : nullconst Mobile = children const isMobile = return isMobile ? children : nullconst Default = children const isNotMobile = return isNotMobile ? children : null const Example = <div> <Desktop>Desktop or laptop</Desktop> <Tablet>Tablet</Tablet> <Mobile>Mobile</Mobile> <Default>Not </Default> </div>
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: