Media component

Media.js

import React, { Component } from 'react';
import { arrayOf, node, oneOfType } from 'prop-types';

class Media extends Component {
  constructor(props) {
    super(props);

    this.state = {
      matches: window.matchMedia(this.props.query).matches,
    };
  }

  componentDidMount() {
    this.mql = window.matchMedia(this.props.query);
    this.mql.addListener(this.handleMedia);
  }

  componentWillUnmount() {
    this.mql.removeListener(this.handleMedia);
  }

  handleMedia = ({ matches }) => this.setState({ matches });

  render () {
    return this.props.children(this.state.matches);
  }
}

Media.propTypes = {
  children: oneOfType([
    arrayOf(node),
    node
  ]).isRequired
};

export default Media;