The best supported, easiest to use react media query module.
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').
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).
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.