react-matchmedia-connect
=========================

![npm]()

* Higher order components for the matchMedia API
* Receive props that indicate whether your media queries match

Check out the demo

Installation

``bash
npm install react-matchmedia-connect --save
`

Usage

$3

createMatchMediaConnect lets you register a set of media queries. If one of the queries changes, you component will be updated.

`javascript
import { createMatchMediaConnect } from 'react-matchmedia-connect';

// Define some media queries and give them a key
const connect = createMatchMediaConnect({
isLandscape: '(orientation: landscape)',
isMin400: '(min-width: 400px)',
isTablet: '(min-width: 700px), handheld and (orientation: landscape)'
});
`
Then use this connect function throughout your app:
`javascript
const Component = ({ isLandscape, isMin400 }) => (



);
// This component only needs isLandscape and isMin400
const ConnectedComponent = connect(['isLandscape', 'isMin400'])(Component);
`
`javascript
const OtherComponent = ({ isTablet }) => (
isTablet ?

Tablet

:

No tablet

);
// This component only needs isTablet
const OtherConnectedComponent = connect(['isTablet'])(Component);

`

$3

createResponsiveConnect expects a list of breakpoints and creates the respective media queries with createMatchMediaConnect. You'll get a isMin and isMax property for each breakpoint as well as a isPortrait and isLandscape property.

`javascript
import { createResponsiveConnect } from 'react-matchmedia-connect';
const connect = createResponsiveConnect({
xs: 480,
sm: 768,
md: 992,
lg: 1200
});
`
`javascript
const Component = ({ isMinMd, isMaxMd }) => (



);
// Only connect to isMinMd and isMaxMd
const ConnectedComponent = connect(['isMinMd', 'isMaxMd'])(Component);
`

API

$3

* mediaQueries (Object): A set of media queries.
* returns (Function): connect function that connects your components to changes

`javascript
const connect = createMatchMediaConnect({
isLandscape: '(orientation: landscape)',
isMin400: '(min-width: 400px)'
});
`
##### connect(properties)
* properties (Array): An array of properties that your component should receive
* returns (Function): wrapWithConnect higher order function

`javascript
const wrapWithConnect = connect(['isMin400']);
`

##### wrapWithConnect(Component)
* Component (Component): The component that you want to connect
* returns (Component): Connected component

`javascript
const Component = ({ isMin400 }) => (



);
// This component only needs isLandscape and isMin400
const ConnectedComponent = wrapWithConnect(Component);
`

$3

* breakpoints (Object): A set of breakpoints
* returns (Function): connect function that connects your components to changes

Default breakpoints:
`javascript
const defaultBreakpoints = {
xs: 480,
sm: 768,
md: 992,
lg: 1200
};
`

Examples

Run the simple example:
`bash


Make sure that you've installed the dependencies

npm install

Move to example directory

cd react-matchmedia-connect/examples/simple
npm install
npm start
`

Tests

`bash

Make sure that you've installed the dependencies

npm install

Run tests

npm test
`

$3

`bash


Run code coverage. Results can be found in ./coverage


npm run test:cov
``

License

MIT