react-responsive

by contra

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

4.9K Stars 251 Forks Last release: Not found MIT License 301 Commits 35 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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-device-width: 1224px)' }) const isBigScreen = useMediaQuery({ query: '(min-device-width: 1824px)' }) const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' }) const isTabletOrMobileDevice = useMediaQuery({ query: '(max-device-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 also have a huge screen

} {isTabletOrMobile &&

You are sized like a tablet or mobile phone though

} >} {isTabletOrMobileDevice &&

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.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 = useMediaQuery({ minDeviceWidth: 1224 }) const isBigScreen = useMediaQuery({ minDeviceWidth: 1824 }) const isTabletOrMobile = useMediaQuery({ maxWidth: 1224 }) const isTabletOrMobileDevice = useMediaQuery({ maxDeviceWidth: 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( { minDeviceWidth: 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

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.