Package Exports

react-matchmedia-connect

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-matchmedia-connect) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-matchmedia-connect

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

Check out the demo

Installation

npm install react-matchmedia-connect --save

Usage

createMatchMediaConnect

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

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:

const Component = ({ isLandscape, isMin400 }) => (
  <div>
    <div>{isLandscape ? 'landscape' : 'portrait'}</div>
    <div>{isMin400 ? 'at least 400' : 'less than 400'}</div>
  </div>
);
// This component only needs `isLandscape` and `isMin400`
const ConnectedComponent = connect(['isLandscape', 'isMin400'])(Component);

const OtherComponent = ({ isTablet }) => (
  isTablet ? <div>Tablet</div> : <div>No tablet</div>
);
// This component only needs `isTablet`
const OtherConnectedComponent = connect(['isTablet'])(Component);

createResponsiveConnect

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

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

const Component = ({ isMinMd, isMaxMd }) => (
  <div>
    <div>{isMinMd ? 'greater than 992px' : 'less than 992px'}</div>
    <div>{isMaxMd ? 'less than 1200px' : 'greater than 1199px'}</div>
    <div>{isMinMd && isMaxMd ? 'between 992px and 1199px' : 'other'}</div>
  </div>
);
// Only connect to `isMinMd` and `isMaxMd`
const ConnectedComponent = connect(['isMinMd', 'isMaxMd'])(Component);

API

`createMatchMediaConnect(mediaQueries)`

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

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

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

`wrapWithConnect(Component)`

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

const Component = ({ isMin400 }) => (
  <div>{isMin400 ? 'at least 400' : 'less than 400'}</div>
);
// This component only needs `isLandscape` and `isMin400`
const ConnectedComponent = wrapWithConnect(Component);

`createResponsiveConnect(breakpoints)`

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

Default breakpoints:

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

Examples

Run the simple example:

# 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

# Make sure that you've installed the dependencies
npm install
# Run tests
npm test

Code Coverage

# Run code coverage. Results can be found in `./coverage`
npm run test:cov

License

MIT