A simple React HOC to feed css breakpoint data to a component.

react-bootstrap-breakpoints.js

import React, { Component } from 'react';
import _ from 'lodash';

/*
    HOC to feed breakpoints data to child component.
    Breakpoint data is based on Bootstrap's breakpoints
    Using lodash throttle to optimize the high rate of events being fired.
*/

export const Breakpoints = (WrappedComponent) => {
    return class BreakpointComponent extends Component {
        
        state = {
            currentBreakpoint : undefined,
            activeBreakpoints : undefined,
            breakpoints : [
                {name: 'xs', value: 0},
                {name: 'sm', value: 576},
                {name: 'md', value: 768},
                {name: 'lg', value: 992},
                {name: 'xl', value: 1200}
            ]
        }

        componentDidMount(){
            window.addEventListener('resize', this.handleResize, false);
            this.calculateBreakpoint();
        }

        componentWillUnmount(){
            this.handleResize.cancel;
            window.removeEventListener('resize', this.handleResize, false);
        }

        handleResize = _.throttle(() => {
            this.calculateBreakpoint();
        }, 500 );

        calculateBreakpoint = () => {
           const current = this.state.breakpoints.filter( x => x.value >= window.innerWidth )[0];
           const active = this.state.breakpoints.filter( x => x.value <= window.innerWidth );
           this.setState({ 
               currentBreakpoint : current,
               activeBreakpoints : active
            });
        } 

        render(){

            return (
                <WrappedComponent {...this.props} {...this.state} />
            )
        }
    }
}

How to use it please?

React hook version:

export const withBreakpoint = (Component) => {
return (props) => {

    const [state, setState] = useState({
        currentBreakpoint: undefined,
        activeBreakpoints: undefined,
        breakpoints: [
            { name: 'xs', value: 0 },
            { name: 'sm', value: 576 },
            { name: 'md', value: 768 },
            { name: 'lg', value: 992 },
            { name: 'xl', value: 1200 }
        ]
    });

    useEffect(() => {
        window.addEventListener('resize', handleResize, false);
        calculateBreakpoint();

        return () => {
            handleResize.cancel;
            window.removeEventListener('resize', handleResize, false);
        };
    }, []);

    const handleResize = _.throttle(() => {
        calculateBreakpoint();
    }, 500);

    const calculateBreakpoint = () => {
        const current = state.breakpoints.filter(x => x.value >= window.innerWidth)[0];
        const active = state.breakpoints.filter(x => x.value <= window.innerWidth);
        setState({
            currentBreakpoint: current,
            activeBreakpoints: active
        });
    }

    return (
        <Component {...props} {...state} />
    )
}

}