https://github.com/damassi/react-responsive-decorator
A higher-order component / decorator around enquire.js
https://github.com/damassi/react-responsive-decorator
Last synced: about 1 year ago
JSON representation
A higher-order component / decorator around enquire.js
- Host: GitHub
- URL: https://github.com/damassi/react-responsive-decorator
- Owner: damassi
- License: mit
- Created: 2017-10-22T07:38:13.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-22T07:44:12.000Z (over 8 years ago)
- Last Synced: 2025-03-31T23:29:52.666Z (about 1 year ago)
- Language: JavaScript
- Size: 354 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-responsive-decorator
A higher-order component / decorator wrapper around [enquire.js](http://wicky.nillia.ms/enquire.js/) that injects `media()` into component props.
This library uses [json2mq](https://github.com/akiran/json2mq) internally to convert media queries from object to string format. See [enquire.js's API](http://wicky.nillia.ms/enquire.js/#api) for more info.
```javascript
import React from 'react';
import Responsive from 'react-responsive-decorator';
@Responsive
class MyComponent extends React.Component {
state = {
isMobile: false
}
componentDidMount() {
this.props.media({ minWidth: 768 }, () => {
this.setState({
isMobile: false
});
});
this.props.media({ maxWidth: 768 }, () => {
this.setState({
isMobile: true
});
});
}
render() {
const { isMobile } = this.state;
return (
{isMobile ?
Mobile :
Not mobile
}
);
}
}
export default MyComponent;
```
Or, if you'd rather return a wrapped, Higher Order component, export like so:
```javascript
import React from 'react';
import Responsive from 'react-responsive-decorator';
class MyComponent extends React.Component {
(...)
}
export default Responsive(MyComponent);
```
Credits
=======
This code has been adapted from https://github.com/akiran/react-responsive-mixin in order to remove the mixin dependency.