React Component, HOC, and Redux Reducer to manage mediaQueries.
npm install react-mql
npm install --save react-mql
`
What's included
####
A React component that takes a media prop and a function for children the function is called with the mediaQueries and if the match the query.
#### withMatchMedia(mediaQuery [, mediaQuery])(Component)
An HOC that will pass the status of mediaQueries as a prop provided to the wrapped component.
#### createMatchMediaReducer(mediaQuery [, mediaQuery])
Creates a redux store for the provided mediaQueries.
#### syncMatchMediaWithStore(reducerKey, reduxStore)
Monitors the mediaQueries from the matchMediaReducer
MatchMedia Example
`js
import React, { Component } from 'react'
import { MatchMedia } from 'react-mql';
import { minWidthSmall, minWidthMedium } from './styles/breakpoints'; //minWidthSmall: ('min-width: 500px') minWidthMedium: ('min-width: 800px')
const MatchMediaExample = (props) => (
{ (matchesMedia) => ( //matchMedia: { "('min-width: 500px')": true, "('min-width: 800px')": true }
{ matchMedia[minWidthSmall] && I show match min-width of 500px }
{ matchMedia[minWidthMedium] && I show match min-width of 800px }
) }
);
export default MatchMediaExample;
`
withMatchMedia Example
`js
import React, { Component } from 'react'
import { withMatchMedia } from 'react-mql';
import { minWidthSmall, minWidthMedium } from './styles/breakpoints'; //minWidthSmall: ('min-width: 500px') minWidthMedium: ('min-width: 800px')
const withSmallAndMedium(minWidthSmall, minWidthMedium);
const MatchMediaExample = (props) => ( // props.matchesMedia: { "('min-width: 500px')": true, "('min-width: 800px')": true }
);
export default withSmallAndMedium(MatchMediaExample);
`
Redux Example
`js
import React from 'react'
import ReactDOM from 'react-dom'
import { createMatchMediaReducer, syncMatchMediaWithStore } from 'react-mql'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { minWidthSmall, minWidthMedium } from './styles/breakpoints'; //minWidthSmall: ('min-width: 500px') minWidthMedium: ('min-width: 800px')
import Application from './Application';
import reducers from './reducers'
// Add the reducer to your store on the matchesMedia key
const store = createStore(
combineReducers({
...reducers,
matchesMedia: createMatchMediaReducer(minWidthSmall, minWidthMedium)
})
);
// Start listening on the mediaQueries and dispatch events on changes.
syncMatchMediaWithStore('matchesMedia', store);
ReactDOM.render(
,
document.getElementById('mount')
);
``