Pre-configured queries for common devices?

[mjackson]

Would it be useful for us to provide pre-configured queries for common devices? If so, what would be the best way to expose it?

The folks over at @CSS-Tricks have compiled a nice list of media queries for standard devices that I thought we could start with. Maybe we could provide a bunch of pre-configured <Media> components that target these devices.

<iPhone6Media>
{matches => matches ? (
  <p>You're on an iPhone 6</p>
) : (
  <p>You're using something else</p>
)
</iPhone6Media>

@ryanflorence Thoughts?

[ryanflorence]

Hmm, I'm not immediately excited about it, I prefer just doing a general "phone-ish" size in portrait, "phone-ish" size landscape, and then "desktop-ish". Designing to exact sizes makes me nervous. What does it do on the phone that comes out next month?

[StevenLangbroek]

How about exporting strings under react-media/presets?

[mjackson]

Someone suggested on Twitter that we could have components for e.g. and , which I think is interesting.

[ryanflorence]

yeah, I like Phone, Tablet, but strings might be good enough? Motion doesn't export "Wobbly" but rather presets.wobbly.

[StevenLangbroek]

Agree, could be a very nice API. How would it compose though? with exporting strings, you could just:

import Media from 'react-media';
import { PHONE, TABLET } from 'react-media/presets';

export default () => ({
  <Media query={`${PHONE} or ${TABLET}`}>
    {matches => `Phone or tablet!`}
  </Media>
});

You could even use these as primitives to base the "prefab" components on then.

[StevenLangbroek]

Thought: could an actively maintained set of device-specific and device-class (phone, tablet, desktop) queries serve as the backbone of this project, in the same vein that history is for react-router?

[ryanflorence]

we send strings to matchMedia, that's the "history" part here I think.

[StevenLangbroek]

You're right, but what I meant was "something that could be abstracted away and could serve other projects / the greater community".

[mjackson]

Ah, yes. Strings seems to be the obvious choice for composition here. The hardest part left is deciding what the actual queries should look like. Are there any broadly recommended "phone" or "tablet" media queries out there?

[kwelch]

Few notes: 1) Love the idea, of a presets file. Would love to see it as landscape and portrait since they are so different. 2) Chrome has pre-defined in their dev tools and appear to be close adaptions of the bootstrap media queries.

[mjackson]

@kwelch I poked around in Chrome's DevTools but couldn't get the queries they're using. Do you see them?

[kwelch]

If you switch the dropdown to Responsive then, the predefined widths show up.

• Mobile S - 320px
• Mobile M - 375px
• Mobile L - 425px etc..

There is more granular than I think is appropriate for this library (at this point), but could give a decent MVP.

[mjackson]

Looks like this conversation stalled. Closing.