React-MQL-Manager
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.
Not Using a State Management Library
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.
Using a State Management Library
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).
Install
React-MQL-Manager can be consumed as CommonJS modules, ES modules or UMD.
yarn add react-mql-manager
or
npm i react-mql-manager
Demo
See a codesandbox.io demo of React-MQL-Manager with no state management lib, Redux, and Mobx, and React-Broadcast here