Skip to content

Commit

Permalink
Merge branch 'master' into react16
Browse files Browse the repository at this point in the history
  • Loading branch information
contra committed Oct 2, 2017
2 parents bb69da2 + 44c86d4 commit 6b300d7
Show file tree
Hide file tree
Showing 12 changed files with 6,703 additions and 1,790 deletions.
27 changes: 0 additions & 27 deletions .jshintrc
View file

This file was deleted.

180 changes: 84 additions & 96 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,38 +39,34 @@ A MediaQuery element functions like any other React component, which means you c
### Using CSS Media Queries

```jsx
var MediaQuery = require('react-responsive');

var A = React.createClass({
render: function(){
return (
<div>
<div>Device Test!</div>
<MediaQuery query='(min-device-width: 1224px)'>
<div>You are a desktop or laptop</div>
<MediaQuery query='(min-device-width: 1824px)'>
<div>You also have a huge screen</div>
</MediaQuery>
<MediaQuery query='(max-width: 1224px)'>
<div>You are sized like a tablet or mobile phone though</div>
</MediaQuery>
</MediaQuery>
<MediaQuery query='(max-device-width: 1224px)'>
<div>You are a tablet or mobile phone</div>
</MediaQuery>
<MediaQuery query='(orientation: portrait)'>
<div>You are portrait</div>
</MediaQuery>
<MediaQuery query='(orientation: landscape)'>
<div>You are landscape</div>
</MediaQuery>
<MediaQuery query='(min-resolution: 2dppx)'>
<div>You are retina</div>
</MediaQuery>
</div>
);
}
});
import MediaQuery from 'react-responsive';

const Example = () => (
<div>
<div>Device Test!</div>
<MediaQuery query="(min-device-width: 1224px)">
<div>You are a desktop or laptop</div>
<MediaQuery query="(min-device-width: 1824px)">
<div>You also have a huge screen</div>
</MediaQuery>
<MediaQuery query="(max-width: 1224px)">
<div>You are sized like a tablet or mobile phone though</div>
</MediaQuery>
</MediaQuery>
<MediaQuery query="(max-device-width: 1224px)">
<div>You are a tablet or mobile phone</div>
</MediaQuery>
<MediaQuery query="(orientation: portrait)">
<div>You are portrait</div>
</MediaQuery>
<MediaQuery query="(orientation: landscape)">
<div>You are landscape</div>
</MediaQuery>
<MediaQuery query="(min-resolution: 2dppx)">
<div>You are retina</div>
</MediaQuery>
</div>
);
```

### Using Properties
Expand All @@ -85,38 +81,34 @@ Any numbers given as a shorthand will be expanded to px (`1234` will become `'12


```jsx
var MediaQuery = require('react-responsive');

var A = React.createClass({
render: function(){
return (
<div>
<div>Device Test!</div>
<MediaQuery minDeviceWidth={1224}>
<div>You are a desktop or laptop</div>
<MediaQuery minDeviceWidth={1824}>
<div>You also have a huge screen</div>
</MediaQuery>
<MediaQuery maxWidth={1224}>
<div>You are sized like a tablet or mobile phone though</div>
</MediaQuery>
</MediaQuery>
<MediaQuery maxDeviceWidth={1224}>
<div>You are a tablet or mobile phone</div>
</MediaQuery>
<MediaQuery orientation='portrait'>
<div>You are portrait</div>
</MediaQuery>
<MediaQuery orientation='landscape'>
<div>You are landscape</div>
</MediaQuery>
<MediaQuery minResolution='2dppx'>
<div>You are retina</div>
</MediaQuery>
</div>
);
}
});
import MediaQuery from 'react-responsive';

const Example = () => (
<div>
<div>Device Test!</div>
<MediaQuery minDeviceWidth={1224}>
<div>You are a desktop or laptop</div>
<MediaQuery minDeviceWidth={1824}>
<div>You also have a huge screen</div>
</MediaQuery>
<MediaQuery maxWidth={1224}>
<div>You are sized like a tablet or mobile phone though</div>
</MediaQuery>
</MediaQuery>
<MediaQuery maxDeviceWidth={1224}>
<div>You are a tablet or mobile phone</div>
</MediaQuery>
<MediaQuery orientation="portrait">
<div>You are portrait</div>
</MediaQuery>
<MediaQuery orientation="landscape">
<div>You are landscape</div>
</MediaQuery>
<MediaQuery minResolution="2dppx">
<div>You are retina</div>
</MediaQuery>
</div>
);
```

### Rendering with a child function
Expand Down Expand Up @@ -198,38 +190,34 @@ If you are using [redux](http://redux.js.org/) you can automatically pass `width


```jsx
var MediaQuery = require('react-responsive');

var A = React.createClass({
render: function(){
return (
<div>
<div>Device Test!</div>
<MediaQuery minDeviceWidth={1224} values={{deviceWidth: 1600}}>
<div>You are a desktop or laptop</div>
<MediaQuery minDeviceWidth={1824}>
<div>You also have a huge screen</div>
</MediaQuery>
<MediaQuery maxWidth={1224}>
<div>You are sized like a tablet or mobile phone though</div>
</MediaQuery>
</MediaQuery>
<MediaQuery maxDeviceWidth={1224}>
<div>You are a tablet or mobile phone</div>
</MediaQuery>
<MediaQuery orientation='portrait'>
<div>You are portrait</div>
</MediaQuery>
<MediaQuery orientation='landscape'>
<div>You are landscape</div>
</MediaQuery>
<MediaQuery minResolution='2dppx'>
<div>You are retina</div>
</MediaQuery>
</div>
);
}
});
import MediaQuery from 'react-responsive';

const Example = () => (
<div>
<div>Device Test!</div>
<MediaQuery minDeviceWidth={1224} values={{ deviceWidth: 1600 }}>
<div>You are a desktop or laptop</div>
<MediaQuery minDeviceWidth={1824}>
<div>You also have a huge screen</div>
</MediaQuery>
<MediaQuery maxWidth={1224}>
<div>You are sized like a tablet or mobile phone though</div>
</MediaQuery>
</MediaQuery>
<MediaQuery maxDeviceWidth={1224}>
<div>You are a tablet or mobile phone</div>
</MediaQuery>
<MediaQuery orientation="portrait">
<div>You are portrait</div>
</MediaQuery>
<MediaQuery orientation="landscape">
<div>You are landscape</div>
</MediaQuery>
<MediaQuery minResolution="2dppx">
<div>You are retina</div>
</MediaQuery>
</div>
);
```

### Common use cases
Expand Down
Loading

0 comments on commit 6b300d7

Please sign in to comment.