React-mql-manager NPM

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

See this guide

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

See this guide

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).