recommended solution for multiple MQs

[VinSpee]

Hi,

what's the current solution for multiple MQs? Multiple media components? How should I compose something like that?

A solution like this feels right to me:

      <Media
        query={{
          sm: {
            minWidth: theme.sizes.z5,
          },
          md: {
            minWidth: theme.sizes.z10,
          },
        }}
      >
        {({ sm, md }) => (
           <div>
               { sm && <span>I am small</span> }
               { md && <span> I am medium</span> }
           </div>
        );
        }
      </Media>

at small would render as:

<div>
   <span>I am small</span>
</div>

and at medium:

<div>
    <span>I am small</span>
    <span>I am medium</span>
</div>

Thoughts?

[mjackson]

To avoid overloading the query prop, I think we should have a queries prop that expects the kind of object you're describing, and it would use the keys as you've shown. Care to make a PR?

[VinSpee]

Sounds like a good idea. I'll give it a whirl!

[VinSpee]

@mjackson

here's the outline I'm thinking:

propTypes change to:

  static propTypes = {
    query: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object,
      PropTypes.arrayOf(PropTypes.object.isRequired)
    ]),
    queries: PropTypes.shape({
      [PropTypes.string]: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.object,
        PropTypes.arrayOf(PropTypes.object.isRequired)
      ]),
    }),
    render: PropTypes.func,
    children: PropTypes.oneOfType([
      PropTypes.node,
      PropTypes.func
    ])
  }

now in componentWillMount we need to check for either prop, if query, keep functionality the same. If queries

• create an array of json2mq strings,
• set this.mediaQueryList to be an array matchMedia objects for each of the queries
• add a listener to each of them that runs this.updateMatches

then, in updateMatches

• if query prop, keep functionality the same
• if queries prop, set state to an object where the key is the name of the query, the value is true / false according to the matchMedia.matches value.

sound sound?

[VinSpee]

for the curious: here's a webpackbin demo to play around with

http://www.webpackbin.com/E1Ce0d0KG

[ryanflorence]

I've had a version of this a couple years ago that had this api:

<Media queries={{ small: '...', large: '...' }}/>

[VinSpee]

@ryanflorence here's the API I was suggesting, the same as your idea:

a0665e8#diff-02d7a6fb8ca14af07e3d2ce4f14dea77R77

<Media queries={{
     small: (this value could be anything that a `query` can be currently),
     large: ...same,
/>

[stephenjwatkins]

I've been wanting this as well. I hope this change makes it in!

[mjackson]

I know it's a little late for discussion around this (especially since I just merged #39 this morning) but what's to prevent you from doing this @VinSpee?

<div>
  <Media query={{ minWidth: theme.sizes.z5 }} render={() => <span>I am small</span>}/>
  <Media query={{ minWidth: theme.sizes.z10 }} render={() => <span>I am medium</span>}/>
</div>

You'd get the same result, right?

Only reason I'm wondering is because the code is a lot more complex now just to support the queries prop, but it seems like you could achieve the same result with more than one <Media> element.

[mjackson]

Ping @souporserious who I know was also thinking about this problem

[VinSpee]

in the specific example I provided, that would be a fine solution, but if I'm doing something like changing classnames based on breakpoint, it becomes very very messy quickly

[souporserious]

Same thoughts as @VinSpee, the ability to pass multiple queries can help with overall responsive design. With the latest addition I can now build a context provider and HoC around Media and pass my breakpoints down to child components really easy. Similar to this project.

It would be cool to have the context helpers baked in here as an optional include, but not sure if you want that in this library. I can try a PR out if you are interested, just let me know :)

[mjackson]

Thanks for the feedback, @VinSpee and @souporserious. It'd be great to have a test that shows off what you're talking about, just so I can easily remember why the added complexity is justified. Maybe something like this?

  <Media queries={{ small: '...', large: '...' }} render={({ small, large }) => (
    <div className={small ? 'small' : large ? 'large' : 'medium'}/>
  )}/>

[VinSpee]

happy to add a test for that case. incoming.

[mjackson]

@VinSpee Maybe just modify the existing test you wrote for this feature.