{"repo":"yocontra/react-responsive","free":true,"listed":false,"github":"https://github.com/yocontra/react-responsive","clone":"git clone https://github.com/yocontra/react-responsive.git","description":"CSS media queries in react - for responsive design, and more.","language":"TypeScript","stars":7172,"topics":["react"],"license":"MIT","category":"ui-components","readme_excerpt":"react-responsive [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] 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 Example Usage With Hooks Hooks is a new feature available in 8.0.0! With Components 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/yocontra/react-responsive/blob/master/src/mediaQuery.ts#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: 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). Supplying through Context You can also pass devi","default_branch":null,"files":null,"tree":[],"storefront":"/r/yocontra","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/yocontra/react-responsive/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}