React-MQL-Manager is an unopinionated, flexible set of modules allowing you to handle media queries in React (or JS generally) regardless of your approach to state management. It internally constructs Media Query Lists and provides an API allowing you to react to changes.
If you are not using a state-management library, React-MQL-Manager exports a <Provider> component to pass your queries down your component tree, as well as a higher-order component: withMediaQueries, or alternatively, a <MediaQueriesRenderProps> component to wrap any child component that needs to access the queries match state.
If you are using a state-management library, you will interact with the core class of the library, the MQL-Manager class. This class (not a React component) internally constructs your Media Query Lists based on a simple queries argument you provide.
The onChange argument you provide fires every time one of your queries' match state changes, but can be debounced using the optional debounce argument (type: Num of milliseconds).
React-MQL-Manager can be consumed as CommonJS modules, ES modules or UMD.
yarn add react-mql-manager
or
npm i react-mql-manager
See a codesandbox.io demo of React-MQL-Manager with no state management lib, Redux, and Mobx, and React-Broadcast here