A HOC which receive media query string, and hide wrapped component when this window size matches this media query

const-media.js

export const SIZES = {
    small: 768,
    medium: 1024,
    large: 1200,
};

hideOn.jsx

import React, { Component } from 'react';

const hideOn = mediaQuery => WrappedComponent => class extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isHidden: window.matchMedia(mediaQuery).matches,
        };
    }

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

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

    render() {
        return this.state.isHidden ? null : <WrappedComponent {...this.props} />;
    }

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

export default hideOn;

utils-media.js

import { SIZES } from 'const/media';

export const smallAndUp = `(min-width: ${SIZES.small / 16}em)`;
export const smallAndDown = `(max-width: ${SIZES.small / 16}em)`;

export const mediumAndUp = `(min-width: ${SIZES.medium / 16}em)`;
export const mediumAndDown = `(max-width: ${SIZES.medium / 16}em)`;

export const largeAndUp = `(min-width: ${SIZES.large / 16}em)`;

Example:

// receive media query as string
const hideOnMaxWidth500 = hideOn('(max-width: 500px)');

// we can use media utils
const hideOnMobile = hideOn(smallAndDown);
const Logo = hideOnMobile(() => <img src="..." alt="..." />);

const Component = hideOn(mediumAndUp)(WrappedComponent)