Skip to content

Commit c21643e

Browse files
mjacksonmjackson
committed
Prettify
1 parent e47626d commit c21643e

File tree

5 files changed

+113
-104
lines changed

5 files changed

+113
-104
lines changed

‎README.md

Lines changed: 56 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,30 @@
22

33
[build-badge]: https://img.shields.io/travis/ReactTraining/react-media/master.svg?style=flat-square
44
[build]: https://travis-ci.org/ReactTraining/react-media
5-
65
[npm-badge]: https://img.shields.io/npm/v/react-media.svg?style=flat-square
76
[npm]: https://www.npmjs.org/package/react-media
87

98
[`react-media`](https://www.npmjs.com/package/react-media) is a CSS media query component for React.
109

11-
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.
10+
A `<Media>` component listens for matches to a
11+
[CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) and renders stuff
12+
based on whether the query matches or not.
1213

1314
## Installation
1415

1516
Using [npm](https://www.npmjs.com/):
1617

1718
$ npm install --save react-media
1819

19-
Then with a module bundler like [webpack](https://webpack.github.io/), use as you would anything else:
20+
Then with a module bundler like [webpack](https://webpack.github.io/), use as you would anything
21+
else:
2022

2123
```js
2224
// using ES modules
23-
import Media from 'react-media'
25+
import Media from "react-media"
2426

2527
// using CommonJS modules
26-
var Media = require('react-media')
28+
var Media = require("react-media")
2729
```
2830

2931
The UMD build is also available on [unpkg](https://unpkg.com):
@@ -36,22 +38,27 @@ You can find the library on `window.ReactMedia`.
3638

3739
## Usage
3840

39-
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.
41+
Render a `<Media>` component with a `query` prop whose value is a valid
42+
[CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries). The `children`
43+
prop should be a function whose only argument will be a boolean flag that indicates whether the
44+
media query matches or not.
4045

4146
```jsx
42-
import React from 'react'
43-
import Media from 'react-media'
47+
import React from "react"
48+
import Media from "react-media"
4449

4550
class App extends React.Component {
4651
render() {
4752
return (
4853
<div>
4954
<Media query="(max-width: 599px)">
50-
{matches => matches ? (
51-
<p>The document is less than 600px wide.</p>
52-
) : (
53-
<p>The document is at least 600px wide.</p>
54-
)}
55+
{matches =>
56+
matches ? (
57+
<p>The document is less than 600px wide.</p>
58+
) : (
59+
<p>The document is at least 600px wide.</p>
60+
)
61+
}
5562
</Media>
5663
</div>
5764
)
@@ -61,21 +68,27 @@ class App extends React.Component {
6168

6269
If you render a `<Media>` component on the server, it always matches.
6370

64-
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.
71+
If you use a regular React element as `children` (i.e. `<Media><SomethingHere/></Media>`) it will be
72+
rendered if the query matches. However, _you may end up creating a bunch of elements that won't ever
73+
actually be rendered to the page_ (i.e. you'll do a lot of unnecessary `createElement`s on each
74+
`render`). Thus, a `children` **function** (i.e. `<Media>{matches => ...}</Media>`) is the preferred
75+
API. Then you can decide in the callback which elements to create based on the result of the query.
6576

66-
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.
77+
For the common case of "only render something when the media query matches", you can use a `render`
78+
prop that is only called if the query matches.
6779

6880
```jsx
69-
import React from 'react'
70-
import Media from 'react-media'
81+
import React from "react"
82+
import Media from "react-media"
7183

7284
class App extends React.Component {
7385
render() {
7486
return (
7587
<div>
76-
<Media query="(max-width: 599px)" render={() => (
77-
<p>The document is less than 600px wide.</p>
78-
)}/>
88+
<Media
89+
query="(max-width: 599px)"
90+
render={() => <p>The document is less than 600px wide.</p>}
91+
/>
7992
</div>
8093
)
8194
}
@@ -84,31 +97,44 @@ class App extends React.Component {
8497

8598
The `render` prop is never called if the query does not match.
8699

87-
`<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).
100+
`<Media query>` also accepts an object, similar to
101+
[React's built-in support for inline style objects](https://facebook.github.io/react/tips/inline-styles.html)
102+
in e.g. `<div style>`. These objects are converted to CSS media queries via
103+
[json2mq](https://github.com/akiran/json2mq/blob/master/README.md#usage).
88104

89105
```jsx
90-
import React from 'react'
91-
import Media from 'react-media'
106+
import React from "react"
107+
import Media from "react-media"
92108

93109
class App extends React.Component {
94110
render() {
95111
return (
96112
<div>
97113
<Media query={{ maxWidth: 599 }}>
98-
{matches => matches ? (
99-
<p>The document is less than 600px wide.</p>
100-
) : (
101-
<p>The document is at least 600px wide.</p>
102-
)}
114+
{matches =>
115+
matches ? (
116+
<p>The document is less than 600px wide.</p>
117+
) : (
118+
<p>The document is at least 600px wide.</p>
119+
)
120+
}
103121
</Media>
104122
</div>
105123
)
106124
}
107125
}
108126
```
109127

110-
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.
128+
Keys of media query objects are camel-cased and numeric values automatically get the `px` suffix.
129+
See the [json2mq docs](https://github.com/akiran/json2mq/blob/master/README.md#usage) for more
130+
examples of queries you can construct using objects.
131+
132+
If you're curious about how react-media differs from
133+
[react-responsive](https://github.com/contra/react-responsive), please see
134+
[this comment](https://github.com/ReactTraining/react-media/issues/70#issuecomment-347774260).
111135

112136
## About
113137

114-
Development of react-media is done 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])!
138+
Development of react-media is done by [React Training](https://reacttraining.com). If you're
139+
interested in learning more about what React can do for your company, please
140+
[get in touch](mailto:[email protected])!

‎modules/Media.js

Lines changed: 16 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from 'react'
2-
import PropTypes from 'prop-types'
3-
import json2mq from 'json2mq'
1+
import React from "react"
2+
import PropTypes from "prop-types"
3+
import json2mq from "json2mq"
44

55
/**
66
* Conditionally renders based on whether or not a media query matches.
@@ -14,10 +14,7 @@ class Media extends React.Component {
1414
PropTypes.arrayOf(PropTypes.object.isRequired)
1515
]).isRequired,
1616
render: PropTypes.func,
17-
children: PropTypes.oneOfType([
18-
PropTypes.node,
19-
PropTypes.func
20-
])
17+
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
2118
}
2219

2320
static defaultProps = {
@@ -28,17 +25,14 @@ class Media extends React.Component {
2825
matches: this.props.defaultMatches
2926
}
3027

31-
updateMatches = () =>
32-
this.setState({ matches: this.mediaQueryList.matches })
28+
updateMatches = () => this.setState({ matches: this.mediaQueryList.matches })
3329

3430
componentWillMount() {
35-
if (typeof window !== 'object')
36-
return
31+
if (typeof window !== "object") return
3732

3833
let { query } = this.props
3934

40-
if (typeof query !== 'string')
41-
query = json2mq(query)
35+
if (typeof query !== "string") query = json2mq(query)
4236

4337
this.mediaQueryList = window.matchMedia(query)
4438
this.mediaQueryList.addListener(this.updateMatches)
@@ -53,21 +47,15 @@ class Media extends React.Component {
5347
const { children, render } = this.props
5448
const { matches } = this.state
5549

56-
return (
57-
render ? (
58-
matches ? render() : null
59-
) : children ? (
60-
typeof children === 'function' ? (
61-
children(matches)
62-
) : !Array.isArray(children) || children.length ? ( // Preact defaults to empty children array
63-
matches ? React.Children.only(children) : null
64-
) : (
65-
null
66-
)
67-
) : (
68-
null
69-
)
70-
)
50+
return render
51+
? matches ? render() : null
52+
: children
53+
? typeof children === "function"
54+
? children(matches)
55+
: !Array.isArray(children) || children.length // Preact defaults to empty children array
56+
? matches ? React.Children.only(children) : null
57+
: null
58+
: null
7159
}
7260
}
7361

‎modules/__tests__/Media-test.js

Lines changed: 35 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import React from 'react'
2-
import ReactDOM from 'react-dom'
3-
import ReactDOMServer from 'react-dom/server'
4-
import Media from '../Media'
1+
import React from "react"
2+
import ReactDOM from "react-dom"
3+
import ReactDOMServer from "react-dom/server"
4+
import Media from "../Media"
55

6-
const createMockMediaMatcher = (matches) => () => ({
6+
const createMockMediaMatcher = matches => () => ({
77
matches,
88
addListener: () => {},
99
removeListener: () => {}
1010
})
1111

12-
describe('A <Media>', () => {
12+
describe("A <Media>", () => {
1313
let originalMatchMedia
1414
beforeEach(() => {
1515
originalMatchMedia = window.matchMedia
@@ -21,16 +21,16 @@ describe('A <Media>', () => {
2121

2222
let node
2323
beforeEach(() => {
24-
node = document.createElement('div')
24+
node = document.createElement("div")
2525
})
2626

27-
describe('with a query that matches', () => {
27+
describe("with a query that matches", () => {
2828
beforeEach(() => {
2929
window.matchMedia = createMockMediaMatcher(true)
3030
})
3131

32-
describe('and a children element', () => {
33-
it('renders its child', () => {
32+
describe("and a children element", () => {
33+
it("renders its child", () => {
3434
const element = (
3535
<Media query="">
3636
<div>hello</div>
@@ -43,14 +43,10 @@ describe('A <Media>', () => {
4343
})
4444
})
4545

46-
describe('and a children function', () => {
47-
it('renders its child', () => {
46+
describe("and a children function", () => {
47+
it("renders its child", () => {
4848
const element = (
49-
<Media query="">
50-
{matches => (
51-
matches ? <div>hello</div> : <div>goodbye</div>
52-
)}
53-
</Media>
49+
<Media query="">{matches => (matches ? <div>hello</div> : <div>goodbye</div>)}</Media>
5450
)
5551

5652
ReactDOM.render(element, node, () => {
@@ -59,13 +55,9 @@ describe('A <Media>', () => {
5955
})
6056
})
6157

62-
describe('and a render function', () => {
63-
it('renders its child', () => {
64-
const element = (
65-
<Media query="" render={() => (
66-
<div>hello</div>
67-
)}/>
68-
)
58+
describe("and a render function", () => {
59+
it("renders its child", () => {
60+
const element = <Media query="" render={() => <div>hello</div>} />
6961

7062
ReactDOM.render(element, node, () => {
7163
expect(node.firstChild.innerHTML).toMatch(/hello/)
@@ -74,33 +66,29 @@ describe('A <Media>', () => {
7466
})
7567
})
7668

77-
describe('with a query that does not match', () => {
69+
describe("with a query that does not match", () => {
7870
beforeEach(() => {
7971
window.matchMedia = createMockMediaMatcher(false)
8072
})
8173

82-
describe('and a children element', () => {
83-
it('renders its child', () => {
74+
describe("and a children element", () => {
75+
it("renders its child", () => {
8476
const element = (
8577
<Media query="">
8678
<div>hello</div>
8779
</Media>
8880
)
8981

9082
ReactDOM.render(element, node, () => {
91-
expect(node.firstChild.innerHTML || '').not.toMatch(/hello/)
83+
expect(node.firstChild.innerHTML || "").not.toMatch(/hello/)
9284
})
9385
})
9486
})
9587

96-
describe('and a children function', () => {
97-
it('renders its child', () => {
88+
describe("and a children function", () => {
89+
it("renders its child", () => {
9890
const element = (
99-
<Media query="">
100-
{matches => (
101-
matches ? <div>hello</div> : <div>goodbye</div>
102-
)}
103-
</Media>
91+
<Media query="">{matches => (matches ? <div>hello</div> : <div>goodbye</div>)}</Media>
10492
)
10593

10694
ReactDOM.render(element, node, () => {
@@ -109,30 +97,33 @@ describe('A <Media>', () => {
10997
})
11098
})
11199

112-
describe('and a render function', () => {
113-
it('does not render', () => {
100+
describe("and a render function", () => {
101+
it("does not render", () => {
114102
let renderWasCalled = false
115103
const element = (
116-
<Media query="" render={() => {
117-
renderWasCalled = true
118-
return <div>hello</div>
119-
}}/>
104+
<Media
105+
query=""
106+
render={() => {
107+
renderWasCalled = true
108+
return <div>hello</div>
109+
}}
110+
/>
120111
)
121112

122113
ReactDOM.render(element, node, () => {
123-
expect(node.firstChild.innerHTML || '').not.toMatch(/hello/)
114+
expect(node.firstChild.innerHTML || "").not.toMatch(/hello/)
124115
expect(renderWasCalled).toBe(false)
125116
})
126117
})
127118
})
128119
})
129120

130-
describe('rendered on the server', () => {
121+
describe("rendered on the server", () => {
131122
beforeEach(() => {
132123
window.matchMedia = createMockMediaMatcher(true)
133124
})
134125

135-
it('renders its child', () => {
126+
it("renders its child", () => {
136127
const markup = ReactDOMServer.renderToStaticMarkup(
137128
<Media query="">
138129
<div>hello</div>

0 commit comments

Comments
 (0)