diff --git a/README.md b/README.md index 8a40712..79be5c6 100644 --- a/README.md +++ b/README.md @@ -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 + + {(matches) => { + if (matches) { + return
Media query matches!
; + } else { + return
Media query does not match!
; + } + }} +
+``` + ### 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.