Add <Media queries> prop

[mjackson]

This is a follow-up from #38. I removed the commits from #39 in order to ship a 1.x without deprecation warnings, and I'd like to release a 2.x that removes the <Media query> prop and uses <Media queries> instead. This is a breaking change.

The API should be:

<Media queries={{ sm: query, lg: query }} children={({ sm, lg }) => (
  sm ? (
    // The "sm" query matched
  ) : lg ? (
    // The "lg" query matched
  ) : (
    // Neither query matched
  )
)}/>

Note that the value of the queries prop is not itself a media query, but its values are. The children callback receives an object of the same shape (i.e. has the same keys) whose values are boolean, indicating if that query matches or not. A query object may be any of the following:

• A string, e.g. (min-width: 100px) and (max-width: 200px)
• An object, e.g. { minWidth: 100, maxWidth: 200 } => (min-width: 100px) and (max-width: 200px)
• An array (for multiple queries), e.g. [ { screen: true, minWidth: 100 }, { handheld: true, orientation: 'landscape' } ] => screen and (min-width: 100px), handheld and (orientation: landscape)

At this point I'm thinking the render prop should probably just be removed. We can always add it back later if people find they need it.

[souporserious]

This looks great! Following the pattern of react-router and other libraries, do you think there should just be a render prop and no access to children? I've liked the pattern of expecting render props to provide interaction with component generated props.

[mjackson]

I definitely like the name render more than I like children, but I hesitate to disable the children prop entirely just because it's the only one built in to JSX. Maybe we support them both and they do the same thing? Like, render is just an alias for children?

[gribnoysup]

Hi @mjackson!

If you are still interested in going with this approach for next major release, I created a PR with a solution as described in this issue

[abenhamdine]

Any news about this ?
I think this feature is still needed, although #72 has been closed without any explanation.

[prateekgoel]

@mjackson Any update on this? Would like to use this feature.

[edorivai]

@prateekgoel We've merged #72 into the next branch, and are probably releasing it as a major version bump (v2).

[prateekgoel]

Thank you @edorivai, Glad to hear that 😃

[edorivai]

This should already be available in the prerelease of 2.0.0-alpha.1. Please beware that the versioning is still up for debate; there is a good chance that this feature will actually land in a minor (v1) update.

You can expect the release soon (see #123 for details)!