1.0.5 • Published 7 years ago
mq-react v1.0.5
mq-react
The media queries for your React components. Flow-compatible.
Install
npm install --save mq-react
Usage
Example code
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import mqDecorate from 'mq-react';
const TestComponent = props => <pre>{JSON.stringify(props, null, ' ')}</pre>;
TestComponent.defaultProps = { mq: undefined };
const Decorated = mqDecorate(TestComponent);
class App extends Component {
static childContextTypes = {
mq: PropTypes.objectOf(PropTypes.string),
};
/**
* You can use the context for define app defaults
*/
getChildContext() {
return { mq: { isDesktop: '(min-width: 1024px)' } };
}
render() {
return this.props.children;
}
}
window.addEventListener('DOMContentLoaded', () =>
ReactDOM.render(
/**
* Also you can use the props
*/
<App>
<Decorated mq={{ isMobile: '(max-width: 1023px)' }} />
</App>,
document.getElementById('app-root'),
),
);
Render result
<pre>{
"mq": {
"isDesktop": "(min-width: 1024px)",
"isMobile": "(max-width: 1023px)"
},
"isDesktop": true, <!-- true if window width >= 1024px -->
"isMobile": false <!-- true if window width < 1024px -->
}</pre>