v3/packages/design-system/atoms/breakpoints/BreakpointProvider.tsx

import * as React from 'react';
import { mediaQueryDefs } from './Breakpoints';
import { BreakpointContext, ScreenSize } from './Context';

const resetScreen: ScreenSize = {
    onSmallScreen: false,
    onTablet: false,
    onDesktop: false,
};

export class BreakpointsProvider extends React.Component<{}, ScreenSize> {
    public state = {
        ...resetScreen,
        onSmallScreen: true,
    };

    private mediaQueries: { [key in keyof ScreenSize]: MediaQueryList } = {
        onSmallScreen: window.matchMedia(
            mediaQueryDefs.onSmallScreen.replace('@media screen and', '')
        ),
        onTablet: window.matchMedia(
            mediaQueryDefs.onTablet.replace('@media screen and', '')
        ),
        onDesktop: window.matchMedia(
            mediaQueryDefs.onDesktop.replace('@media screen and', '')
        ),
    };

    componentDidMount() {
        Object.entries(this.mediaQueries).forEach(([key, mediaQuery]) =>
            mediaQuery.addEventListener('change', this.handleMediaEvent)
        );
    }

    componentWillUnmount() {
        Object.entries(this.mediaQueries).forEach(([key, mediaQuery]) =>
            mediaQuery.removeEventListener('change', this.handleMediaEvent)
        );
    }

    handleMediaEvent = (event: MediaQueryListEvent) => {
        console.log('handleMediaEvent', { event });
        this.setState({
            ...resetScreen,
            ...this.calculateScreen(),
        });
    };

    calculateScreen = () => {
        if (this.mediaQueries.onDesktop.matches) {
            return { onDesktop: true };
        }

        if (this.mediaQueries.onTablet.matches) {
            return { onTablet: true };
        }

        return { onSmallScreen: true };
    };

    render() {
        return (
            <BreakpointContext.Provider value={{ screenSize: { ...this.state } }}>
                {this.props.children}
            </BreakpointContext.Provider>
        );
    }
}