# react-media-responsive > Provider and media query wrapper for your React components Latest version **0.1.4** (published 2016-08-06) · MIT license · 0 weekly downloads ## Install ```sh npm install react-media-responsive pnpm add react-media-responsive yarn add react-media-responsive bun add react-media-responsive ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.4 | | Published | 2016-08-06 | | First published | 2016-08-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 4 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 6 | | Author | Luis Merino Garcia | | Maintainers | rendez | | Keywords | react, reactjs, responsive, media, media-query, match-media | ## Links - npm: https://www.npmjs.com/package/react-media-responsive - Repository: https://github.com/Rendez/react-media-responsive - Issues: https://github.com/Rendez/react-media-responsive/issues - npm.io page: https://npm.io/package/react-media-responsive ## Dependencies (4) - [invariant](https://npm.io/package/invariant.md) ^2.0.0 - [matchmedia](https://npm.io/package/matchmedia.md) ^0.1.2 - [hyphenate-style-name](https://npm.io/package/hyphenate-style-name.md) ^1.0.1 - [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^1.2.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.1.4 (latest) — 2016-08-06 ## README # Project deprecated in favor of [react-responsive](https://github.com/contra/react-responsive) One of the main reasons I started this project was to achieve greater performance on event changes - through fine-grained control of updates. I also wanted to avoid bloating the code with repetitive `` tags. Since then this has changed and [react-responsive](https://github.com/contra/react-responsive) is performant, plus it provides a way to render children via function, which offers the needed flexibility. # react-media-responsive ## Usable, but still under development There will be examples both vanilla React and also together with Redux, but I'd like to write more test cases and add some more coverage. In the meantime feel free to use this at your own risk. At this point, feedback is very welcomed, as well as contributions. For that, please use Github [issues](https://github.com/Rendez/react-media-responsive/Issues) and follow the [Code of Conduct](https://github.com/Rendez/react-media-responsive/CODE_OF_CONDUCT.md). ## Motivation Truly responsive design is *tricky*, and although React makes reasoning about responsive design very easy, the difficulties grow when we reuse components' presentational logic. If your components' `render` method are like mine, I am sure you'll be often faced complexities when rendering the same component for different resolutions. Often you ought to leave out some menu items, or render a complete separate child depending on your device's orientation. While there are some other projects already solving this [issue](https://github.com/akiran/react-responsive-mixin) [similarly](https://github.com/contra/react-responsive), I found a few problems, or outdated approaches and other stuff leading to code repetition I wasn't happy working with. This new approach is the result of taking a different perspective on `react-responsive`. I wanted more flexibility on how to play within the `render()` method, and the possibility to reduce computational time as I dealt with responsiveness within my React components. If we think of UI responsiveness as part of the state tree, then heavily reusable components become easy to reason about by encouraging the reduction of boilerplate and conditional statements that offer a powerful approach to complicated cases. Think of how easy then becomes, to pass prop value to a child component, and encapsulate other behaviors indirectly related to a media query... Flexibility is served! ## How it works Glad you ask! Because this project has been inspired a great deal by [react-redux](https://github.com/reactjs/react-redux). As a result, you'll probably find the next piece of code very familiar... ```jsx import React from 'react' import SampleApp from './SampleApp.js' import { ResponsiveProvider } from './react-media-responsive' const media = { tablet: { screen: true, minWidth: 768, maxWidth: 1024 }, fromTablet: { minWidth: '768px' }, retina: { minResolution: '2dppx' }, notLandscape: { orientation: 'portrait' } } export default ( ) ``` Good responsive designs are thought using breakpoints, orientation and a variety of other properties. Therefore, you'll want to define these onto a `media` object, and pass it down to the ``. This wrapper uses your app's *context* to keep the state tree of media queries up to date, adding one listener for each of the *named* breakpoints/changes you want to define. These *named* keys are your way into the responsive world. We'll see next how this approach facilitates not only writing code to deal with your responsive design cases, but also to be able to optimize each individual component using `shouldComponentUpdate()`. ## Usage Just like `react-redux`, when we need *responsiveness*, we need to make that component *aware* of changes. Upon wrapping, a component subscribes to the global `responsiveStore` that lives in the context, and will wait for matched media queries' changes. ```jsx import React, { Component } from 'react'; import { responsive } from 'react-media-responsive'; class SampleApp extends Component { render() { const { responsive } = this.props; return (
{responsive.tablet ? ( I am a tablet {responsive.notLandscape ? ( , and I am NOT in landscape mode ) : ( , and I am in landscape mode )} ) : ( I am NOT a tablet {responsive.fromTablet && '. However I am WIDER!'} )}
); } /** * Comment out the next method to get an instant optimization boost, while resizing your browser window. * Note that store updates are already debounced, so use this method mindfully when you want that extra bit of performance. */ //shouldComponentUpdate(nextProps) { // const { fromTablet } = this.props.responsive; // if (fromTablet !== nextProps.responsive.fromTablet) { // return true; // } // return false; //} } export default responsive()(SampleApp); ``` #### Important note The connector/wrapper should be the closest to the actual Component. If you'd use **react-redux's** `connect()` method and then wrap it with `responsive()`, react-redux would be made aware of new properties passed every time a media query matches, which is a small performance penalty you can easily avoid: **BAD**: ```jsx export default responsive()(connect()(SampleApp)); ``` **GOOD**: ```jsx export default connect()(responsive()(SampleApp)); ``` ### Defining media queries Embracing this project's brother repository, please refer to this complete list with all possible shorthands and value types https://github.com/wearefractal/react-responsive/blob/master/src/mediaQuery.js#L9 Any numbers given as a shorthand will be expanded to px (`1234` will become `'1234px'`) ### Options - `withRef {Boolean}` exposes the wrapper component with refs so that you may access it. - `only {Array}` string values passed to this array will implement `shouldComponentUpdate` and trigger only a state change on the WrappedComponent when some value in it matches, ignoring any other updates in `values` passed to the ResponsiveProvider. ### Server rendering Server rendering can be done by passing static values through the `values` property in the provider: ```jsx export default ( ) ``` ## 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 Just like [react-responsive](https://github.com/contra/react-responsive), we encourage you to use polyfills whenever extended browser support is required: - [matchMedia.js by Paul Irish](https://github.com/paulirish/matchMedia.js/) - [media-match (faster, but larger and lacking some features)](https://github.com/weblinc/media-match) --- _Source: https://npm.io/package/react-media-responsive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._