Skip to content

Commit

Permalink
Update README.txt
Browse files Browse the repository at this point in the history 
Updates the readme to use ES6 imports and modern React syntax for class creation.
  • Loading branch information
@vpicone
vpicone authored Oct 2, 2017
1 parent 9a1a10d commit 1d19af9
Showing 1 changed file with 84 additions and 96 deletions.
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

0 comments on commit 1d19af9

Please sign in to comment.