From 8f6db082539fb3409aee11f029556ba428d23904 Mon Sep 17 00:00:00 2001
From: Oscar Bartra <obartra@taser.com>
Date: Sat, 3 Feb 2018 05:47:16 -0800
Subject: [PATCH] refactor(context): Switch to new context API

---
 .babelrc                                  |   3 -
 .eslintrc                                 |   1 -
 package.json                              |   9 +-
 scripts/webpack.config.js                 |   1 -
 src/asGrid/index.js                       |  47 ++++++---
 src/asLayout/index.js                     |  56 +++++-----
 src/col/index.js                          |  29 ++++--
 src/configProvider/index.js               |  56 ++++------
 src/core/asCore.js                        |  84 +++++++--------
 src/dev/dev.js                            |  49 +++++----
 src/root/index.js                         |  28 ++---
 src/types.js                              |  13 +++
 src/utils/index.js                        |  19 ++--
 src/utils/utils.spec.js                   |  12 +--
 src/withResolution/index.js               | 120 +++-------------------
 src/withResolution/mediaQueryComponent.js | 112 ++++++++++++++++++++
 src/withResolution/withResolution.spec.js |   3 +-
 yarn.lock                                 | 102 +++++++++++++-----
 18 files changed, 425 insertions(+), 319 deletions(-)
 create mode 100644 src/withResolution/mediaQueryComponent.js

diff --git a/.babelrc b/.babelrc
index befa5c779..23d31f595 100644
--- a/.babelrc
+++ b/.babelrc
@@ -34,9 +34,6 @@
     ]
   ],
   "env": {
-    "development": {
-      "plugins": ["flow-react-proptypes"]
-    },
     "test": {
       "plugins": [
         [
diff --git a/.eslintrc b/.eslintrc
index b077d06d9..3e5c151e1 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -31,7 +31,6 @@
   "rules": {
     "no-console": 2,
     "jsx-a11y/href-no-hash": 0,
-    "react/prop-types": 0,
     "react/no-deprecated": 2,
     "react/jsx-filename-extension": 0,
     "react/require-default-props": 0,
diff --git a/package.json b/package.json
index f53011ece..0a18107df 100644
--- a/package.json
+++ b/package.json
@@ -89,8 +89,8 @@
     "postcss-nesting": "4.2.1",
     "prettier": "1.10.2",
     "raw-loader": "0.5.1",
-    "react": "16.2.0",
-    "react-dom": "16.2.0",
+    "react": "16.3.0-alpha.0",
+    "react-dom": "16.3.0-alpha.0",
     "react-element-to-jsx-string": "13.1.0",
     "react-test-renderer": "16.2.0",
     "regenerator-runtime": "0.11.1",
@@ -140,7 +140,7 @@
     "commit": "git-cz",
     "contributors:add": "all-contributors add",
     "contributors:gen": "all-contributors generate",
-    "format-all": "git ls-files {src,test,storybook}*.{js,css} | xargs yarn format",
+    "format-all": "git ls-files {src,test,storybook,flow-typed}*.{js,css} | xargs yarn format",
     "format": "prettier --write --single-quote --no-semi --trailing-comma es5",
     "lint:css": "stylelint src/*.css stories/*.css",
     "lint:flow": "flow stop && flow --show-all-errors --include-warnings",
@@ -166,8 +166,7 @@
     }
   },
   "peerDependencies": {
-    "prop-types": ">=15",
-    "react": ">=15"
+    "react": ">=16.3"
   },
   "dependencies": {
     "cxs": "https://github.com/arahansen/cxs#d593d14e708c4f5c17cb2105cb9435ae87ade362",
diff --git a/scripts/webpack.config.js b/scripts/webpack.config.js
index 2bebbda12..bbae95979 100644
--- a/scripts/webpack.config.js
+++ b/scripts/webpack.config.js
@@ -46,7 +46,6 @@ module.exports = {
   devtool: 'source-map',
   externals: {
     react: 'react',
-    'prop-types': 'prop-types',
   },
   module: {
     rules: [
diff --git a/src/asGrid/index.js b/src/asGrid/index.js
index a247b0f37..ee6157250 100644
--- a/src/asGrid/index.js
+++ b/src/asGrid/index.js
@@ -1,33 +1,46 @@
 // @flow
 import * as React from 'react'
 import { compact } from 'lodash'
-import type {
-  OneResolutionGrid,
-  ConfigProviderContext,
-  GridProps,
-} from '../types'
+import type { OneResolutionGrid, GridProps } from '../types'
 import { styles, getCol } from './grid.styles'
 import { getValue } from '../utils'
 import asCore from '../core/asCore'
+import { configProviderContext } from '../configProvider'
 
 const resolutionProperties = ['align', 'justify', 'size']
 
 export default function asGrid(
   Component: React.ComponentType<*> | string
 ): React.ComponentType<GridProps> {
-  function Grid(
-    { align, className, justify, size, innerRef, ...props }: OneResolutionGrid,
-    context: ConfigProviderContext
-  ) {
-    const classes = compact([
-      styles.grid,
-      getCol(size, getValue(context, 'columns')),
-      className,
-      align && styles[`${align}Align`],
-      justify && styles[`${justify}Justify`],
-    ])
+  function Grid({
+    align,
+    className,
+    justify,
+    size,
+    innerRef,
+    ...props
+  }: OneResolutionGrid) {
+    return (
+      <configProviderContext.Consumer>
+        {context => {
+          const classes = compact([
+            styles.grid,
+            getCol(size, getValue(context, 'columns')),
+            className,
+            align && styles[`${align}Align`],
+            justify && styles[`${justify}Justify`],
+          ])
 
-    return <Component {...props} ref={innerRef} className={classes.join(' ')} />
+          return (
+            <Component
+              {...props}
+              ref={innerRef}
+              className={classes.join(' ')}
+            />
+          )
+        }}
+      </configProviderContext.Consumer>
+    )
   }
 
   return asCore(Grid, resolutionProperties)
diff --git a/src/asLayout/index.js b/src/asLayout/index.js
index 18dc96b92..e960b1f3e 100644
--- a/src/asLayout/index.js
+++ b/src/asLayout/index.js
@@ -1,41 +1,47 @@
 // @flow
 import * as React from 'react'
 import { compact } from 'lodash'
-import type {
-  OneResolutionLayout,
-  ConfigProviderContext,
-  LayoutProps,
-} from '../types'
+import type { OneResolutionLayout, LayoutProps } from '../types'
 import getStyles from './layout.styles'
 import asCore from '../core/asCore'
 import { getValues } from '../utils/index'
+import { configProviderContext } from '../configProvider'
 
 const resolutionProperties = ['fixed', 'height', 'overflow']
 
 export default function asLayout(
   Component: React.ComponentType<*> | string
 ): React.ComponentType<LayoutProps> {
-  function Layout(
-    {
-      className,
-      fixed,
-      height,
-      overflow,
-      innerRef,
-      ...props
-    }: OneResolutionLayout,
-    context: ConfigProviderContext
-  ) {
-    const styles = getStyles(getValues(context, props))
-    const classes = compact([
-      className,
-      fixed && styles[`${fixed}Fixed`],
-      height ? styles[`${height}Height`] : styles.fitHeight,
-      overflow && styles.overflow,
-      styles.layout,
-    ])
+  function Layout({
+    className,
+    fixed,
+    height,
+    overflow,
+    innerRef,
+    ...props
+  }: OneResolutionLayout) {
+    return (
+      <configProviderContext.Consumer>
+        {context => {
+          const styles = getStyles(getValues(context, props))
+          const classes = compact([
+            className,
+            fixed && styles[`${fixed}Fixed`],
+            height ? styles[`${height}Height`] : styles.fitHeight,
+            overflow && styles.overflow,
+            styles.layout,
+          ])
 
-    return <Component ref={innerRef} {...props} className={classes.join(' ')} />
+          return (
+            <Component
+              ref={innerRef}
+              {...props}
+              className={classes.join(' ')}
+            />
+          )
+        }}
+      </configProviderContext.Consumer>
+    )
   }
   return asCore(Layout, resolutionProperties)
 }
diff --git a/src/col/index.js b/src/col/index.js
index abfb9b5d3..eabeff248 100644
--- a/src/col/index.js
+++ b/src/col/index.js
@@ -2,23 +2,30 @@
 import * as React from 'react'
 import Grid from '../grid'
 import { getValues } from '../utils'
-import type { GridProps, ConfigProviderContext } from '../types'
+import type { GridProps } from '../types'
+import { configProviderContext } from '../configProvider'
 
-export default function Col(props: GridProps, context: ConfigProviderContext) {
+export default function Col(props: GridProps) {
   if (typeof props.margin !== 'undefined') {
     return <Grid {...props} />
   }
 
-  const { gutter, verticalGutter } = getValues(context, props)
   return (
-    <Grid
-      {...{
-        marginTop: 0,
-        marginRight: gutter / 2,
-        marginBottom: verticalGutter,
-        marginLeft: gutter / 2,
+    <configProviderContext.Consumer>
+      {context => {
+        const { gutter, verticalGutter } = getValues(context, props)
+        return (
+          <Grid
+            {...{
+              marginTop: 0,
+              marginRight: gutter / 2,
+              marginBottom: verticalGutter,
+              marginLeft: gutter / 2,
+            }}
+            {...props}
+          />
+        )
       }}
-      {...props}
-    />
+    </configProviderContext.Consumer>
   )
 }
diff --git a/src/configProvider/index.js b/src/configProvider/index.js
index cbab521fd..7a163318c 100644
--- a/src/configProvider/index.js
+++ b/src/configProvider/index.js
@@ -1,7 +1,8 @@
 // @flow
+/* eslint-disable react/no-unused-prop-types */
 import * as React from 'react'
-import PropTypes from 'prop-types'
 import type {
+  Context,
   ConfigProviderContext,
   DisplayAliases,
   SpacingAliases,
@@ -24,42 +25,27 @@ type Props = {
   verticalGutter?: number,
 }
 
-export const ConfigContextPropTypes = {
-  gymnast: PropTypes.shape({
-    base: PropTypes.number,
-    columns: PropTypes.number,
-    displayAliases: PropTypes.shape({}),
-    fallbackDisplayKey: PropTypes.string,
-    gutter: PropTypes.number,
-    maxPageWidth: PropTypes.number,
-    minPageWidth: PropTypes.number,
-    pageMargin: PropTypes.shape({}),
-    spacingAliases: PropTypes.shape({}),
-    verticalGutter: PropTypes.number,
-  }),
-}
-
-export default class ConfigProvider extends React.Component<Props> {
-  static contextTypes = ConfigContextPropTypes
-  static childContextTypes = ConfigContextPropTypes
-
-  getChildContext(): ConfigProviderContext {
-    const {
-      gutter = defaults.gutter,
-      verticalGutter = gutter,
-      children,
-      ...props
-    } = this.props
+/* eslint-disable flowtype/generic-spacing */
+export const configProviderContext: Context<
+  ConfigProviderContext
+> = React.createContext({})
+/* eslint-enable flowtype/generic-spacing */
 
-    return {
-      gymnast: {
+export default function ConfigProvider({
+  gutter = defaults.gutter,
+  verticalGutter = gutter,
+  children,
+  ...props
+}: Props) {
+  return (
+    <configProviderContext.Provider
+      value={{
         gutter,
         verticalGutter,
         ...props,
-      },
-    }
-  }
-  render() {
-    return this.props.children || null
-  }
+      }}
+    >
+      {children}
+    </configProviderContext.Provider>
+  )
 }
diff --git a/src/core/asCore.js b/src/core/asCore.js
index 38491e0be..81a37d5a5 100644
--- a/src/core/asCore.js
+++ b/src/core/asCore.js
@@ -1,9 +1,9 @@
 // @flow
 import * as React from 'react'
-import type { ConfigProviderContext, OneResolution } from '../types'
+import type { OneResolution } from '../types'
 import withResolution from '../withResolution'
 import { combineSpacing, getValue } from '../utils'
-import { ConfigContextPropTypes } from '../configProvider'
+import { configProviderContext } from '../configProvider'
 
 const sharedResolutionProperties = [
   'margin',
@@ -22,48 +22,50 @@ export default function asCore(
   Component: React.ComponentType<*> | string,
   resolutionProperties: Array<string>
 ) {
-  function Core(
-    {
-      base,
-      margin,
-      marginBottom,
-      marginLeft,
-      marginRight,
-      marginTop,
-      padding,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-      paddingTop,
-      style = {},
-      ...props
-    }: OneResolution,
-    context: ConfigProviderContext
-  ) {
-    const cssStyle = {
-      ...style,
-      ...combineSpacing({
-        spacingProps: {
-          margin,
-          padding,
-          marginTop,
-          marginRight,
-          marginBottom,
-          marginLeft,
-          paddingTop,
-          paddingRight,
-          paddingBottom,
-          paddingLeft,
-        },
-        base: getValue(context, 'base', base),
-        spacingAliases: getValue(context, 'spacingAliases'),
-      }),
-    }
+  function Core({
+    base,
+    margin,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    marginTop,
+    padding,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    style = {},
+    ...props
+  }: OneResolution) {
+    return (
+      <configProviderContext.Consumer>
+        {context => {
+          const cssStyle = {
+            ...style,
+            ...combineSpacing({
+              spacingProps: {
+                margin,
+                padding,
+                marginTop,
+                marginRight,
+                marginBottom,
+                marginLeft,
+                paddingTop,
+                paddingRight,
+                paddingBottom,
+                paddingLeft,
+              },
+              base: getValue(context, 'base', base),
+              spacingAliases: getValue(context, 'spacingAliases'),
+            }),
+          }
 
-    return <Component {...props} style={cssStyle} />
+          return <Component {...props} style={cssStyle} />
+        }}
+      </configProviderContext.Consumer>
+    )
   }
 
-  Core.contextTypes = ConfigContextPropTypes
   return withResolution(
     Core,
     sharedResolutionProperties.concat(resolutionProperties)
diff --git a/src/dev/dev.js b/src/dev/dev.js
index e5743a27c..aa0b16d90 100644
--- a/src/dev/dev.js
+++ b/src/dev/dev.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 import ReactDOM from 'react-dom'
-import { ConfigContextPropTypes } from '../configProvider'
+import { configProviderContext } from '../configProvider'
 import getStyles from './dev.styles'
 import {
   body,
@@ -32,8 +32,6 @@ export default class Dev extends React.Component<Props, State> {
     useShift: true,
   }
 
-  static contextTypes = ConfigContextPropTypes
-
   state = {
     showOverlay: false,
   }
@@ -67,25 +65,32 @@ export default class Dev extends React.Component<Props, State> {
     if (!this.state.showOverlay) {
       return null
     }
-    const values = getValues(this.context)
-    const styles = getStyles(values)
-    const content = (
-      <Layout className={styles.gymnastOverlay}>
-        <div className={styles.leftMargin} />
-        <Root>
-          {times(values.columns).map(key => (
-            <Grid
-              margin={[0, values.gutter / 2]}
-              key={key}
-              size={1}
-              className={styles.col}
-            />
-          ))}
-        </Root>
-        <div className={styles.rightMargin} />
-      </Layout>
-    )
 
-    return ReactDOM.createPortal(content, getDevContainer())
+    return (
+      <configProviderContext.Consumer>
+        {context => {
+          const values = getValues(context)
+          const styles = getStyles(values)
+          const content = (
+            <Layout className={styles.gymnastOverlay}>
+              <div className={styles.leftMargin} />
+              <Root>
+                {times(values.columns).map(key => (
+                  <Grid
+                    margin={[0, values.gutter / 2]}
+                    key={key}
+                    size={1}
+                    className={styles.col}
+                  />
+                ))}
+              </Root>
+              <div className={styles.rightMargin} />
+            </Layout>
+          )
+
+          return ReactDOM.createPortal(content, getDevContainer())
+        }}
+      </configProviderContext.Consumer>
+    )
   }
 }
diff --git a/src/root/index.js b/src/root/index.js
index 362ebf313..779058163 100644
--- a/src/root/index.js
+++ b/src/root/index.js
@@ -1,25 +1,29 @@
 // @flow
 import * as React from 'react'
 import Grid from '../grid'
-import type { GridProps, ConfigProviderContext } from '../types'
+import type { GridProps } from '../types'
 import getStyles from './root.styles'
 import { getValues } from '../utils'
+import { configProviderContext } from '../configProvider'
 
 type Props = GridProps & {
   children?: React.Node,
 }
 
-export default function Root(
-  { children, justify, ...props }: Props,
-  context: ConfigProviderContext
-) {
-  const styles = getStyles(getValues(context, props))
-
+export default function Root({ children, justify, ...props }: Props) {
   return (
-    <Grid {...props} className={styles.root} justify="center">
-      <Grid justify={justify} className={styles.child}>
-        {children}
-      </Grid>
-    </Grid>
+    <configProviderContext.Consumer>
+      {context => {
+        const styles = getStyles(getValues(context, props))
+
+        return (
+          <Grid {...props} className={styles.root} justify="center">
+            <Grid justify={justify} className={styles.child}>
+              {children}
+            </Grid>
+          </Grid>
+        )
+      }}
+    </configProviderContext.Consumer>
   )
 }
diff --git a/src/types.js b/src/types.js
index 5e3874d0e..ef584cce8 100644
--- a/src/types.js
+++ b/src/types.js
@@ -124,3 +124,16 @@ export type LayoutProps = {
   height?: Height | { [string]: Height },
   overflow?: Overflow | { [string]: Overflow },
 }
+
+type Provider<T> = React.Component<{
+  value: T,
+  children?: React.Node,
+}>
+type Consumer<T> = React.Component<{
+  children: (value: T) => React.Node,
+}>
+
+export type Context<T> = {
+  Provider: Provider<T>,
+  Consumer: Consumer<T>,
+}
diff --git a/src/utils/index.js b/src/utils/index.js
index 4f5e1d31c..9a139d1ee 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,5 +1,4 @@
 // @flow
-import { get } from 'lodash'
 import cxs from '../cxs'
 import defaults from '../defaults'
 import type {
@@ -221,16 +220,18 @@ export function toCXS<A>(raw: {
   return styles
 }
 
-export function getValue<A: *>(context: *, property: string, override?: A): A {
-  const contextValue = get(context, `gymnast["${property}"]`)
-
-  return ([override, contextValue, defaults[property]].find(isDefined): any)
+export function getValue<A: *>(
+  context: * = {},
+  property: string,
+  override?: A
+): A {
+  return ([override, context[property], defaults[property]].find(
+    isDefined
+  ): any)
 }
 
-export function getValues(context: *, overrides?: * = {}) {
-  const contextValues = get(context, 'gymnast', {})
-
-  return { ...defaults, ...contextValues, ...overrides }
+export function getValues(context: *, overrides?: *) {
+  return { ...defaults, ...context, ...overrides }
 }
 
 export function accumulateOver(props: Array<string>) {
diff --git a/src/utils/utils.spec.js b/src/utils/utils.spec.js
index 51ca42df3..475da1522 100644
--- a/src/utils/utils.spec.js
+++ b/src/utils/utils.spec.js
@@ -277,13 +277,13 @@ describe('toCXS', () => {
 
 describe('getValue', () => {
   it('should read the value specified by context', () => {
-    const out = getValue({ gymnast: { columns: 14 } }, 'columns')
+    const out = getValue({ columns: 14 }, 'columns')
 
     expect(out).toBe(14)
   })
 
   it('should prefer the override value when provided', () => {
-    const out = getValue({ gymnast: { columns: 14 } }, 'columns', 20)
+    const out = getValue({ columns: 14 }, 'columns', 20)
 
     expect(out).toBe(20)
   })
@@ -297,26 +297,26 @@ describe('getValue', () => {
 
 describe('getValues', () => {
   it('should return an object', () => {
-    const out = getValues({ gymnast: {} })
+    const out = getValues({})
 
     expect(out).toEqual(jasmine.any(Object))
   })
 
   it('should merge context, overrides and defaults', () => {
-    const out = getValues({ gymnast: { A: 2 } })
+    const out = getValues({ A: 2 })
 
     expect(out.A).toBe(2)
     expect(size(out)).toBeGreaterThan(1)
   })
 
   it('should favor overrides when all are specified', () => {
-    const out = getValues({ gymnast: { columns: 2 } }, { columns: 4 })
+    const out = getValues({ columns: 2 }, { columns: 4 })
 
     expect(out.columns).toBe(4)
   })
 
   it('should favor context when only context and defaults are set', () => {
-    const out = getValues({ gymnast: { columns: 2 } })
+    const out = getValues({ columns: 2 })
 
     expect(out.columns).toBe(2)
   })
diff --git a/src/withResolution/index.js b/src/withResolution/index.js
index f2dbfff3e..9f1c025e7 100644
--- a/src/withResolution/index.js
+++ b/src/withResolution/index.js
@@ -4,21 +4,11 @@ import type { DisplayValues } from '../types'
 import log from '../log'
 import { getValue } from '../utils'
 import errors from '../errors'
-import { ConfigContextPropTypes } from '../configProvider'
-import { register, unregister, supportsMatchMedia } from './mediaQuery'
-import {
-  checkShouldShow,
-  getMediaQueries,
-  getSingleResolutionProps,
-  hasTrueValues,
-  isObject,
-  type ShouldShow,
-} from './withResolution.logic'
+import { configProviderContext } from '../configProvider'
+import { supportsMatchMedia } from './mediaQuery'
+import MediaQueryComponent from './mediaQueryComponent'
 
 type Props = { show?: DisplayValues }
-type State = {
-  shouldShow?: ShouldShow,
-}
 
 export default function withResolution(
   Component: React.ComponentType<*>,
@@ -30,95 +20,17 @@ export default function withResolution(
     return Component
   }
 
-  return class WithResolution extends React.Component<
-    Props & React.ElementProps<typeof Component>,
-    State
-  > {
-    static contextTypes = ConfigContextPropTypes
-
-    constructor(props: Props) {
-      super(props)
-      const queries = this.getQueries(props.show)
-
-      this.state = {
-        shouldShow: checkShouldShow(queries),
-      }
-    }
-
-    componentDidMount() {
-      this.addMediaQueryListener(this.props.show)
-    }
-
-    componentWillReceiveProps({ show }: Props) {
-      if (show !== this.props.show) {
-        this.removeMediaQueryListener(this.props.show)
-        this.addMediaQueryListener(show)
-      }
-    }
-
-    componentWillUnmount() {
-      this.removeMediaQueryListener(this.props.show)
-    }
-
-    onMediaQueryChange = (mq?: any = {}, alias: string) => {
-      const show = this.state.shouldShow || {}
-      if (show[alias] !== mq.matches) {
-        this.setState({
-          shouldShow: {
-            ...show,
-            [alias]: mq.matches,
-          },
-        })
-      }
-    }
-
-    getQueries = (show?: DisplayValues) => {
-      const displayAliases = getValue(this.context, 'displayAliases')
-      let queries = show
-
-      if (!show && this.anyPropsUseResolutionFormat()) {
-        queries = Object.keys(displayAliases)
-      }
-
-      return getMediaQueries(queries, displayAliases)
-    }
-
-    anyPropsUseResolutionFormat = () =>
-      resolutionKeys.some(key => isObject(this.props[key]))
-
-    removeMediaQueryListener = (show?: DisplayValues) => {
-      const queries = this.getQueries(show)
-
-      Object.keys(queries).forEach(alias => {
-        unregister(queries[alias], this.onMediaQueryChange)
-      })
-    }
-
-    addMediaQueryListener = (show?: DisplayValues) => {
-      const queries = this.getQueries(show)
-
-      Object.keys(queries).forEach(alias => {
-        register(queries[alias], alias, this.onMediaQueryChange)
-      })
-    }
-
-    render() {
-      if (
-        this.props.show &&
-        this.state.shouldShow &&
-        !hasTrueValues(this.state.shouldShow)
-      ) {
-        return null
-      }
-
-      const props = getSingleResolutionProps({
-        props: this.props,
-        shouldShow: this.state.shouldShow,
-        resolutionKeys,
-        fallbackDisplayKey: getValue(this.context, 'fallbackDisplayKey'),
-      })
-
-      return <Component {...props} />
-    }
-  }
+  return (props: Props & React.ElementProps<typeof Component>) => (
+    <configProviderContext.Consumer>
+      {context => (
+        <MediaQueryComponent
+          {...props}
+          resolutionKeys={resolutionKeys}
+          displayAliases={getValue(context, 'displayAliases')}
+          fallbackDisplayKey={getValue(context, 'fallbackDisplayKey')}
+          component={Component}
+        />
+      )}
+    </configProviderContext.Consumer>
+  )
 }
diff --git a/src/withResolution/mediaQueryComponent.js b/src/withResolution/mediaQueryComponent.js
new file mode 100644
index 000000000..d73c0b62f
--- /dev/null
+++ b/src/withResolution/mediaQueryComponent.js
@@ -0,0 +1,112 @@
+// @flow
+import * as React from 'react'
+import type { DisplayValues, DisplayAliases } from '../types'
+import { register, unregister } from './mediaQuery'
+import {
+  checkShouldShow,
+  getMediaQueries,
+  getSingleResolutionProps,
+  hasTrueValues,
+  isObject,
+  type ShouldShow,
+} from './withResolution.logic'
+
+type Props = {
+  +show?: DisplayValues,
+  +fallbackDisplayKey: string,
+  +displayAliases: DisplayAliases,
+  +resolutionKeys: string[],
+}
+type State = {
+  shouldShow?: ShouldShow,
+}
+
+export default class MediaQueryComponent extends React.Component<
+  Props & React.ElementProps<typeof React.Component>,
+  State
+> {
+  constructor(props: Props) {
+    super(props)
+    const queries = this.getQueries(props.show)
+
+    this.state = {
+      shouldShow: checkShouldShow(queries),
+    }
+  }
+
+  componentDidMount() {
+    this.addMediaQueryListener(this.props.show)
+  }
+
+  componentWillReceiveProps({ show }: Props) {
+    if (show !== this.props.show) {
+      this.removeMediaQueryListener(this.props.show)
+      this.addMediaQueryListener(show)
+    }
+  }
+
+  componentWillUnmount() {
+    this.removeMediaQueryListener(this.props.show)
+  }
+
+  onMediaQueryChange = (mq?: any = {}, alias: string) => {
+    const show = this.state.shouldShow || {}
+    if (show[alias] !== mq.matches) {
+      this.setState({
+        shouldShow: {
+          ...show,
+          [alias]: mq.matches,
+        },
+      })
+    }
+  }
+
+  getQueries = (show?: DisplayValues) => {
+    let queries = show
+
+    if (!show && this.anyPropsUseResolutionFormat()) {
+      queries = Object.keys(this.props.displayAliases)
+    }
+
+    return getMediaQueries(queries, this.props.displayAliases)
+  }
+
+  anyPropsUseResolutionFormat = () =>
+    this.props.resolutionKeys.some(key => isObject(this.props[key]))
+
+  removeMediaQueryListener = (show?: DisplayValues) => {
+    const queries = this.getQueries(show)
+
+    Object.keys(queries).forEach(alias => {
+      unregister(queries[alias], this.onMediaQueryChange)
+    })
+  }
+
+  addMediaQueryListener = (show?: DisplayValues) => {
+    const queries = this.getQueries(show)
+
+    Object.keys(queries).forEach(alias => {
+      register(queries[alias], alias, this.onMediaQueryChange)
+    })
+  }
+
+  render() {
+    if (
+      this.props.show &&
+      this.state.shouldShow &&
+      !hasTrueValues(this.state.shouldShow)
+    ) {
+      return null
+    }
+
+    const props = getSingleResolutionProps({
+      props: this.props,
+      shouldShow: this.state.shouldShow,
+      resolutionKeys: this.props.resolutionKeys,
+      fallbackDisplayKey: this.props.fallbackDisplayKey,
+    })
+    const Component = this.props.component
+
+    return <Component {...props} />
+  }
+}
diff --git a/src/withResolution/withResolution.spec.js b/src/withResolution/withResolution.spec.js
index c76a114d5..812fd7153 100644
--- a/src/withResolution/withResolution.spec.js
+++ b/src/withResolution/withResolution.spec.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react'
 import { mount } from 'enzyme'
 import log from '../log'
@@ -11,7 +12,7 @@ import { unregister, register } from './mediaQuery'
 
 describe('withResolution', () => {
   let wrapper
-  const Fruit = ({ fruit }) => <div>{fruit}</div>
+  const Fruit = ({ fruit }: {| +fruit: string |}) => <div>{fruit}</div>
 
   it('should be a pass through if matchMedia is not supported', () => {
     spyOn(log, 'warn')
diff --git a/yarn.lock b/yarn.lock
index f29884b0b..d54420030 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2231,7 +2231,14 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
     caniuse-db "^1.0.30000639"
     electron-to-chromium "^1.2.7"
 
-browserslist@^2.0.0, browserslist@^2.1.2, browserslist@^2.11.3:
+browserslist@^2.0.0:
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.11.1.tgz#02fda29d9a2164b879100126e7b0d0b57e43a7bb"
+  dependencies:
+    caniuse-lite "^1.0.30000789"
+    electron-to-chromium "^1.3.30"
+
+browserslist@^2.1.2, browserslist@^2.11.3:
   version "2.11.3"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.11.3.tgz#fe36167aed1bbcde4827ebfe71347a2cc70b99b2"
   dependencies:
@@ -2404,7 +2411,19 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
   version "1.0.30000808"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000808.tgz#30dfd83009d5704f02dffb37725068ed12a366bb"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805:
+caniuse-lite@^1.0.0:
+  version "1.0.30000789"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000789.tgz#2e3d937b267133f63635ef7f441fac66360fc889"
+
+caniuse-lite@^1.0.30000789:
+  version "1.0.30000810"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000810.tgz#47585fffce0e9f3593a6feea4673b945424351d9"
+
+caniuse-lite@^1.0.30000792:
+  version "1.0.30000792"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000792.tgz#d0cea981f8118f3961471afbb43c9a1e5bbf0332"
+
+caniuse-lite@^1.0.30000805:
   version "1.0.30000808"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000808.tgz#7d759b5518529ea08b6705a19e70dbf401628ffc"
 
@@ -2801,7 +2820,7 @@ combined-stream@1.0.6, combined-stream@^1.0.5, combined-stream@~1.0.5:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@2.14.x, commander@^2.11.0, commander@^2.12.2, commander@^2.13.0, commander@^2.8.1, commander@^2.9.0, commander@~2.14.1:
+commander@2.14.x, commander@~2.14.1:
   version "2.14.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.14.1.tgz#2235123e37af8ca3c65df45b026dbd357b01b9aa"
 
@@ -2815,6 +2834,14 @@ commander@2.9.0:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
+commander@^2.11.0, commander@^2.13.0, commander@^2.9.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
+
+commander@^2.12.2, commander@^2.8.1:
+  version "2.12.2"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"
+
 commitizen@2.9.6:
   version "2.9.6"
   resolved "https://registry.yarnpkg.com/commitizen/-/commitizen-2.9.6.tgz#c0d00535ef264da7f63737edfda4228983fa2291"
@@ -3621,8 +3648,8 @@ domutils@1.5.1:
     domelementtype "1"
 
 domutils@^1.5.1:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.6.2.tgz#1958cc0b4c9426e9ed367fb1c8e854891b0fa3ff"
   dependencies:
     dom-serializer "0"
     domelementtype "1"
@@ -3692,9 +3719,19 @@ ejs@2.5.7, ejs@^2.5.7:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.7.tgz#cc872c168880ae3c7189762fd5ffc00896c9518a"
 
-electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30:
-  version "1.3.33"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.33.tgz#bf00703d62a7c65238136578c352d6c5c042a545"
+electron-releases@^2.1.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/electron-releases/-/electron-releases-2.8.0.tgz#643c27ab116b608e4244e6b5a07fbf798453f590"
+
+electron-to-chromium@^1.2.7:
+  version "1.3.30"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.30.tgz#9666f532a64586651fc56a72513692e820d06a80"
+  dependencies:
+    electron-releases "^2.1.0"
+
+electron-to-chromium@^1.3.30:
+  version "1.3.32"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.32.tgz#11d0684c0840e003c4be8928f8ac5f35dbc2b4e6"
 
 elegant-spinner@^1.0.1:
   version "1.0.1"
@@ -4515,8 +4552,8 @@ fileset@^2.0.2:
     minimatch "^3.0.3"
 
 filesize@^3.5.11:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.0.tgz#22d079615624bb6fd3c04026120628a41b3f4efa"
+  version "3.5.11"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.11.tgz#1919326749433bb3cf77368bd158caabcc19e9ee"
 
 fill-range@^2.1.0:
   version "2.2.3"
@@ -9497,9 +9534,9 @@ process-es6@^0.11.2, process-es6@^0.11.3:
   version "0.11.6"
   resolved "https://registry.yarnpkg.com/process-es6/-/process-es6-0.11.6.tgz#c6bb389f9a951f82bd4eb169600105bd2ff9c778"
 
-process-nextick-args@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
 
 process@^0.11.10:
   version "0.11.10"
@@ -9743,7 +9780,16 @@ raw-loader@0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
 
-rc@^1.1.6, rc@^1.1.7:
+rc@^1.1.6:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.3.tgz#51575a900f8dd68381c710b4712c2154c3e2035b"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+rc@^1.1.7:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.5.tgz#275cd687f6e3b36cc756baa26dfee80a790301fd"
   dependencies:
@@ -9790,9 +9836,9 @@ react-docgen@^2.20.0:
     node-dir "^0.1.10"
     recast "^0.12.6"
 
-react-dom@16.2.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
+react-dom@16.3.0-alpha.0:
+  version "16.3.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.0-alpha.0.tgz#e3ff7cf8f26639072c0c41ce78eb9674da886c60"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -9908,9 +9954,9 @@ react-treebeard@^2.1.0:
     shallowequal "^0.2.2"
     velocity-react "^1.3.1"
 
-react@16.2.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
+react@16.3.0-alpha.0:
+  version "16.3.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.3.0-alpha.0.tgz#974475eb090fbbbf7dd16b909b05b973f0b75436"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -9975,13 +10021,13 @@ read-pkg@^3.0.0:
     path-type "^3.0.0"
 
 "readable-stream@1 || 2", readable-stream@2, readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.4.tgz#c946c3f47fa7d8eabc0b6150f4a12f69a4574071"
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
   dependencies:
     core-util-is "~1.0.0"
     inherits "~2.0.3"
     isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
+    process-nextick-args "~1.0.6"
     safe-buffer "~5.1.1"
     string_decoder "~1.0.3"
     util-deprecate "~1.0.1"
@@ -10621,8 +10667,8 @@ safe-env@1.2.0:
     ramda "0.22.1"
 
 sane@^2.0.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/sane/-/sane-2.4.1.tgz#29f991208cf28636720efdc584293e7fd66663a5"
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-2.3.0.tgz#3f3df584abf69e63d4bb74f0f8c42468e4d7d46b"
   dependencies:
     anymatch "^1.3.0"
     exec-sh "^0.2.0"
@@ -10707,7 +10753,11 @@ semantic-release@12.4.1:
     resolve-from "^4.0.0"
     semver "^5.4.1"
 
-"semver@2 >=2.2.1 || 3.x || 4 || 5", "semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1:
+"semver@2 >=2.2.1 || 3.x || 4 || 5", semver@^5.0.1, semver@^5.1.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"