Skip to content

Commit

Permalink
Update docs with new feature.
Browse files Browse the repository at this point in the history
  • Loading branch information
eightypop committed Oct 18, 2016
1 parent 80fddd9 commit b27da86
Showing 1 changed file with 16 additions and 0 deletions.
16 changes: 16 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,22 @@ var A = React.createClass({
});
```

###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

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.
Expand Down

0 comments on commit b27da86

Please sign in to comment.