react-responsive - npm Package Compare versions

Comparing version 1.1.5 to 1.2.0

package.json

		{
		"name": "react-responsive",
		"description": "Media queries in react for responsive design",
		"version": "1.1.5",
		"version": "1.2.0",
		"homepage": "http://github.com/wearefractal/react-responsive",
		@@ -62,3 +62,3 @@ "repository": {
		"lint": "jshint ./src --reporter=node_modules/jshint-stylish --exclude node_modules",
		"test": "NODE_PATH=$NODE_PATH:$PWD/src $(npm bin)/mocha -R dot --compilers .:test/compiler.js --require ./test/setup.js test/*_test.js"
		"test": "NODE_PATH=$NODE_PATH:$PWD/src $(npm bin)/mocha -R spec --compilers .:test/compiler.js --require ./test/setup.js test/*_test.js"
		},
		@@ -65,0 +65,0 @@ "engines": {

README.md

		@@ -112,2 +112,18 @@ # react-responsive [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Support us][gittip-image]][gittip-url]

		### Rendering with a child function

		You may also specify a function for the child of the MediaQuery component. When the component renders, it is passed whether or not the given media query matches. This function must return a single element or `null`.

		```jsx
		<MediaQuery minDeviceWidth={700}>
		{(matches) => {
		if (matches) {
		return <div>Media query matches!</div>;
		} else {
		return <div>Media query does not match!</div>;
		}
		}}
		</MediaQuery>
		```

		### Component Property
		@@ -114,0 +130,0 @@

src/index.js

		@@ -14,3 +14,3 @@ 'use strict';
		values: React.PropTypes.shape(mediaQuery.matchers),
		children: React.PropTypes.array
		children: React.PropTypes.oneOfType([React.PropTypes.node, React.PropTypes.function])
		};
		@@ -95,2 +95,6 @@ var mediaKeys = Object.keys(mediaQuery.all);
		render: function(){
		if(typeof this.props.children === 'function') {
		return this.props.children(this.state.matches);
		}

		if (this.state.matches === false) {
		@@ -97,0 +101,0 @@ return null;

test/index_test.js

		@@ -20,2 +20,11 @@ var React = require('react');
		});
		it('renders with output of callback', function() {
		const mq = (
		<MediaQuery query="all">
		{matches => <div className={matches ? 'matched': ''} />}
		</MediaQuery>
		);
		const e = TestUtils.renderIntoDocument(mq);
		assert.isNotFalse(TestUtils.findRenderedDOMComponentWithClass(e, 'matched'));
		});
		it('renders children', function() {
		@@ -137,3 +146,12 @@ const mq = (
		assert.isNotFalse(TestUtils.findRenderedDOMComponentWithClass(e, 'parentBox'));
		})
		});
		it('renders with output of callback', function() {
		const mq = (
		<MediaQuery maxWidth={300}>
		{matches => <div className={matches ? 'matched': 'no-match'} />}
		</MediaQuery>
		);
		const e = TestUtils.renderIntoDocument(mq);
		assert.isNotFalse(TestUtils.findRenderedDOMComponentWithClass(e, 'no-match'));
		});
		});

New alerts