redux-mediaquery

👉 Watch me present this at React Europe 2016 👈

Intro

This is an ActionCreator for Redux that makes CSS mediaqueries (and more) available in the store. This allows you to declaratively make responsive layouts.

It is very small, without any dependencies, except that the reducer requires Object.assign().

Use Cases

• Complement CSS, rendering fully different components depending on screen size instead of just showing/hiding parts of the application
• Update measuring components when screen size changes
• responsive images
• flag server-side rendering
• …

How to use

1. npm install --save redux-mediaquery
2. In your store creator, import the reducer and action:

import {reducer as responsive, mediaQueryTracker} from 'redux-mediaquery'

1. Add it to the reducers:

const reducer = combineReducers({
  responsive,
  ...reducers,
})

1. After the store is created, indicate the properties that you are interested in:

const unlisten = mediaQueryTracker({
  isPhone: "screen and (max-width: 767px)",
  isTablet: "screen and (max-width: 1024px)",
  innerWidth: true,
  innerHeight: true,
}, store.dispatch))

You can call unlisten() when you need to remove the listener it puts on window, for example when you are Note: this stores the dispatch handler. If you want it to look up the dispatch handler at runtime (e.g. because you change the store), you can dispatch mediaQueryTracker(...) as an action. In that case, do not provide the dispatch argument. This requires you to use the redux-thunk middleware.

1. Connect components to the store and conditionally render things:

@connect(({responsive}) => ({
  isPhone: responsive.isPhone,
  innerHeight: responsive.innerHeight,
}))
class SomeComponent extends React.Component {
  render() {
    const {isPhone, innerHeight} = this.props
    return (
      <div>
        {isPhone ? (
          <h1>I'm on a phone!</h1>
        ) : (
          <p>Desktop here. My height is {innerHeight}</p>
        )}
      </div>
    )
  }

1. sit back and relax 🏝

Pro Tip: write your media queries so false is the default, for server side rendering or in case matchMedia doesn't exist

Browser Support

For innerWidth/innerHeight, IE9 is sufficient. For the mediaqueries, this relies on matchMedia() support in the browser, and thus requires Internet Explorer 10+.

Object.assign() needs to be polyfilled if missing. (It is probably already available, through your JSX build)

Changelog

• v0.11:
  • remove reliance on redux-thunk (backwards-compatible)
  • unlisten for hot reload etc
  • some tests
• v0.10:
  • change the action type string to have '@@' as a prefix (@moimikey)

Ideas for future development

• uglify build
• stable API once more feedback from community
• other special measurements? e.g. "is actual phone", "has touch", …
• a collection of breakpoints/queries?
• server side helpers for converting from user agent string to redux actions
• demo page