HOC for fetching breakpoint

withBreakpoint.js

import React, { Component } from 'react';
import debounce from 'lodash.debounce';

const withBreakpoint = TargetComponent => class extends Component {
    state = {
        breakpoint: this.getBreakpoint(),
    };

    componentDidMount() {
        window.addEventListener('resize', this.updateBreakpoint);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.updateBreakpoint);
    }

    getBreakpoint() {
        return window.getComputedStyle(document.body, ':before')
            .getPropertyValue('content').replace(/"/g, '');
    };

    updateBreakpoint = debounce(() =>
        this.setState({ breakpoint: this.getBreakpoint() })
    , 100);

    render() {
        return (
            <TargetComponent {...this.props} {...this.state} />
        );
    }
};

export default withBreakpoint;
export const SMALL = 'small';
export const MEDIUM = 'medium';
export const LARGE = 'large';