Update README

Author: mjackson

README.md

@@ -7,25 +7,22 @@
 
 [`react-media`](https://www.npmjs.com/package/react-media) is a CSS media query component for React.
 
-A `<Media>` component listens for matches to a
-[CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) and renders stuff
-based on whether the query matches or not.
+A `<Media>` component listens for matches to a [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) and renders stuff based on whether the query matches or not.
 
 ## Installation
 
-Using [npm](https://www.npmjs.com/):
+Using npm:
 
     $ npm install --save react-media
 
-Then with a module bundler like [webpack](https://webpack.github.io/), use as you would anything
-else:
+Then, use as you would anything else:
 
 ```js
 // using ES modules
-import Media from "react-media"
+import Media from "react-media";
 
 // using CommonJS modules
-var Media = require("react-media")
+var Media = require("react-media");
 ```
 
 The UMD build is also available on [unpkg](https://unpkg.com):
@@ -38,14 +35,11 @@ You can find the library on `window.ReactMedia`.
 
 ## Usage
 
-Render a `<Media>` component with a `query` prop whose value is a valid
-[CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries). The `children`
-prop should be a function whose only argument will be a boolean flag that indicates whether the
-media query matches or not.
+Render a `<Media>` component with a `query` prop whose value is a valid [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries). The `children` prop should be a function whose only argument will be a boolean flag that indicates whether the media query matches or not.
 
 ```jsx
-import React from "react"
-import Media from "react-media"
+import React from "react";
+import Media from "react-media";
 
 class App extends React.Component {
   render() {
@@ -61,25 +55,20 @@ class App extends React.Component {
           }
         </Media>
       </div>
-    )
+    );
   }
 }
 ```
 
 If you render a `<Media>` component on the server, it always matches.
 
-If you use a regular React element as `children` (i.e. `<Media><SomethingHere/></Media>`) it will be
-rendered if the query matches. However, _you may end up creating a bunch of elements that won't ever
-actually be rendered to the page_ (i.e. you'll do a lot of unnecessary `createElement`s on each
-`render`). Thus, a `children` **function** (i.e. `<Media>{matches => ...}</Media>`) is the preferred
-API. Then you can decide in the callback which elements to create based on the result of the query.
+If you use a regular React element as `children` (i.e. `<Media><SomethingHere/></Media>`) it will be rendered if the query matches. However, _you may end up creating a bunch of elements that won't ever actually be rendered to the page_ (i.e. you'll do a lot of unnecessary `createElement`s on each `render`). Thus, a `children` **function** (i.e. `<Media>{matches => ...}</Media>`) is the preferred API. Then you can decide in the callback which elements to create based on the result of the query.
 
-For the common case of "only render something when the media query matches", you can use a `render`
-prop that is only called if the query matches.
+For the common case of "only render something when the media query matches", you can use a `render` prop that is only called if the query matches.
 
 ```jsx
-import React from "react"
-import Media from "react-media"
+import React from "react";
+import Media from "react-media";
 
 class App extends React.Component {
   render() {
@@ -90,21 +79,18 @@ class App extends React.Component {
           render={() => <p>The document is less than 600px wide.</p>}
         />
       </div>
-    )
+    );
   }
 }
 ```
 
 The `render` prop is never called if the query does not match.
 
-`<Media query>` also accepts an object, similar to
-[React's built-in support for inline style objects](https://facebook.github.io/react/tips/inline-styles.html)
-in e.g. `<div style>`. These objects are converted to CSS media queries via
-[json2mq](https://github.com/akiran/json2mq/blob/master/README.md#usage).
+`<Media query>` also accepts an object, similar to [React's built-in support for inline style objects](https://facebook.github.io/react/tips/inline-styles.html) in e.g. `<div style>`. These objects are converted to CSS media queries via [json2mq](https://github.com/akiran/json2mq/blob/master/README.md#usage).
 
 ```jsx
-import React from "react"
-import Media from "react-media"
+import React from "react";
+import Media from "react-media";
 
 class App extends React.Component {
   render() {
@@ -120,28 +106,19 @@ class App extends React.Component {
           }
         </Media>
       </div>
-    )
+    );
   }
 }
 ```
 
-Keys of media query objects are camel-cased and numeric values automatically get the `px` suffix.
-See the [json2mq docs](https://github.com/akiran/json2mq/blob/master/README.md#usage) for more
-examples of queries you can construct using objects.
+Keys of media query objects are camel-cased and numeric values automatically get the `px` suffix. See the [json2mq docs](https://github.com/akiran/json2mq/blob/master/README.md#usage) for more examples of queries you can construct using objects.
 
-An optional `targetWindow` prop can be specified if you want the `query` to be
-evaluated against a different window object than the one the code is running in.
-This can be useful for example if you are rendering part of your component tree
-to an iframe or [a popup window](https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202).
+An optional `targetWindow` prop can be specified if you want the `query` to be evaluated against a different window object than the one the code is running in. This can be useful for example if you are rendering part of your component tree to an iframe or [a popup window](https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202).
 
-If you're curious about how react-media differs from
-[react-responsive](https://github.com/contra/react-responsive), please see
-[this comment](https://github.com/ReactTraining/react-media/issues/70#issuecomment-347774260).
+If you're curious about how react-media differs from [react-responsive](https://github.com/contra/react-responsive), please see [this comment](https://github.com/ReactTraining/react-media/issues/70#issuecomment-347774260).
 
 Enjoy!
 
 ## About
 
-`react-media` is developed and maintained by [React Training](https://reacttraining.com). If you're
-interested in learning more about what React can do for your company, please
-[get in touch](mailto:[email protected])!
+`react-media` is developed and maintained by [React Training](https://reacttraining.com). If you're interested in learning more about what React can do for your company, please [get in touch](mailto:[email protected])!