react-responsive - npm Package Compare versions

react-responsive

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Comparing version 0.0.10 to 1.0.0

package.json

		{
		"name": "react-responsive",
		"description": "Media queries in react for responsive design",
		"version": "0.0.10",
		"version": "1.0.0",
		"homepage": "http://github.com/wearefractal/react-responsive",
		@@ -6,0 +6,0 @@ "repository": {

README.md

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

		### Component Property

		You may specify an optional `component` property on the `MediaQuery` that indicates what component to wrap children with. Any additional props defined on the `MediaQuery` will be passed through to this "wrapper" component. If the `component` property is not defined and the `MediaQuery` has more than 1 child, a `div` will be used as the "wrapper" component by default. However, if the `component` prop is not defined and there is only 1 child, that child will be rendered alone without a component wrapping it.

		Specifying Wrapper Component

		```jsx
		<MediaQuery minDeviceWidth={700} component="ul">
		<li>Item 1</li>
		<li>Item 2</li>
		</MediaQuery>

		// renders the following when the media query condition is met

		<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		</ul>
		```

		Unwrapped Component

		```jsx
		<MediaQuery minDeviceWidth={700}>
		<div>Unwrapped component</div>
		</MediaQuery>

		// renders the following when the media query condition is met

		<div>Unwrapped component</div>
		```

		Default div Wrapper Component

		```jsx
		<MediaQuery minDeviceWidth={1200} className="some-class">
		<div>Wrapped</div>
		<div>Content</div>
		</MediaQuery>

		// renders the following when the media query condition is met

		<div className="some-class">
		<div>Wrapped</div>
		<div>Content</div>
		</div>
		```

		### Server rendering
		@@ -111,0 +159,0 @@

src/index.js

		@@ -24,3 +24,2 @@ 'use strict';
		return {
		component: 'div',
		values: {}
		@@ -91,3 +90,16 @@ };
		var props = omit(this.props, excludedPropKeys);
		return React.createElement(this.props.component, props, this.props.children);
		if (this.props.component \|\| this.props.children.length > 1) {
		return React.createElement(
		this.props.component \|\| 'div',
		props,
		this.props.children
		);
		} else if (props) {
		return React.cloneElement(
		this.props.children,
		props
		);
		} else {
		return this.props.children;
		}
		}
		@@ -94,0 +106,0 @@ });

Fixed alerts