https://github.com/malte-wessel/react-matchmedia-connect
Higher order components for matchMedia
https://github.com/malte-wessel/react-matchmedia-connect
breakpoint matchmedia reactjs responsive
Last synced: about 1 month ago
JSON representation
Higher order components for matchMedia
- Host: GitHub
- URL: https://github.com/malte-wessel/react-matchmedia-connect
- Owner: malte-wessel
- License: mit
- Created: 2016-02-13T16:52:21.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-26T13:47:31.000Z (over 7 years ago)
- Last Synced: 2025-04-18T22:52:33.968Z (about 2 months ago)
- Topics: breakpoint, matchmedia, reactjs, responsive
- Language: JavaScript
- Homepage: http://malte-wessel.github.io/react-matchmedia-connect/
- Size: 268 KB
- Stars: 50
- Watchers: 2
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
react-matchmedia-connect
=========================
[]()
[](https://www.npmjs.com/package/react-matchmedia-connect)
[](https://www.npmjs.com/package/react-matchmedia-connect)
* [Higher order components](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.9apqrmudz) for the [matchMedia](https://developer.mozilla.org/de/docs/Web/API/Window/matchMedia) API
* Receive props that indicate whether your media queries match
**[Check out the demo](http://malte-wessel.github.io/react-matchmedia-connect/)**
## Installation
```bash
npm install react-matchmedia-connect --save
```
## Usage
### createMatchMediaConnect
`createMatchMediaConnect` lets you register a set of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_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 }) => (
{isLandscape ? 'landscape' : 'portrait'}
{isMin400 ? 'at least 400' : 'less than 400'}
);
// 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);
```
### createResponsiveConnect
`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 }) => (
{isMinMd ? 'greater than 992px' : 'less than 992px'}
{isMaxMd ? 'less than 1200px' : 'greater than 1199px'}
{isMinMd && isMaxMd ? 'between 992px and 1199px' : 'other'}
);
// 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](#connectproperties)** 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](#wrapwithconnectcomponent)** 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 }) => (
{isMin400 ? 'at least 400' : 'less than 400'}
);
// This component only needs `isLandscape` and `isMin400`
const ConnectedComponent = wrapWithConnect(Component);
```
### `createResponsiveConnect(breakpoints)`
* `breakpoints` (Object): A set of breakpoints
* `returns` (Function): **[connect](#connectproperties)** 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
```
### Code Coverage
```bash
# Run code coverage. Results can be found in `./coverage`
npm run test:cov
```
## License
MIT