Use latest React createContext

[jooj123]

Use latest React createContext

[gricard]

I'll probably take a shot at this too, since I was just experimenting with the new Context API the other day.

[jooj123]

Cool - just needs to be backwards compatible with react 15 for the time being (as ideally want this lib to still work with 15 for now)

[gricard]

@jooj123 Ok. I can either create a separate media-query-context-provider component and only export the Provider and Consumer if React.createContext exists, so it is only supplied in React 16+, or I could use create-react-contex that polyfills the functionality for React 14 + 15. Do you have a preference?

[jooj123]

https://github.com/jamiebuilds/create-react-context looks good 👍
Not sure yet if the move to createContext will change the usage of react-media-query-hoc .. hopefully not.

Before you spend time on this maybe just confirm if there will be breaking changes to the interface?

[gricard]

I'm pretty sure I can do it without modifying the Provider API. That would still take children and wrap them in its context. We could also expose MediaQuery.Provider and MediaQuery.Consumer components so users could have all of the flexibility that the new Context API provides.

e.g.:

import {MediaQueryContext as MediaQuery} from 'react-media-query-hoc';
const mediaQueries = const mediaQueries = {
  oneColumn: "screen and (max-width: 991px)",
  twoColumn: "screen and (min-width: 992px)",
};
function ResponsiveComponent(props) {
   return props.media.oneColumn ? (
         <div>Only one column!</div>
      ) : (
         <div>First column!</div>
         <div>Second column!</div>
      );
}
function MediaQueryWrapper(props) {
   return (
      <MediaQuery.Provider queries={mediaQueries}>
         <div id="otherDocumentStructure">
            <div id="yetMoreStructure">
               <MediaQuery.Consumer>
                  {media => (
                     <ResponsiveComponent media={media} />
                  )}
               </MediaQuery.Consumer>
            </div>
        </div>
      </MediaQuery.Provider>
   );
}

[jooj123]

Keeping the existing api to avoid breaking changes is good 👍

Can you provide an example where exposing MediaQuery.Provider and MediaQuery.Consumer might be useful?
The above example shows you can use Consumer directly in JSX, is the main advantage readability?

Also why is there 2 MediaQuery.Consumer ?

Just want to be careful about adding too many different ways to use react-media-query-hoc also providing a non-hoc mechanism might mean ill need to rename repo 😆 (which isnt the end of the world if there is a good use case for it)

[gricard]

@jooj123 Updated the example earlier. There should only be one MediaQuery.Consumer in there.

With the new Context API, you wrap your component tree with the Provider and below that, when you need access to the Context data, you wrap your component with a Consumer, which then takes a Function-as-Children component and passes the data to that, and then you can pass it down as props. I updated the example above to show the correct usage.

Here's an example I made to try out state management with the new Context API. You can see the Consumer usage in Form.js: https://codesandbox.io/s/l5y6kom6mq

It's interesting, though. The thing that attracted me to this library (other than not tying media query usage simply to conditional rendering and being recently maintained) is that it offered multiple ways to use it. I prefer not to use HOCs personally, so the Provider works great for me.

[gricard]

@jooj123 Here's a prototype of it with the new Context API: https://codesandbox.io/s/1vvm326qp7

There's no change to the HOC usage.

If someone was using the provider without the HOC and consuming directly from this.context (like I've been doing), then it could break (depending on their version of React). Either we can advise them to use the MediaQueryContextConsumer FAC component that's exported from media-query-context.js, or we can provide a separate abstracted one that does the same thing (in case of any potential future API changes). I added an example of that in there also.

Let me know what you think.

[jooj123]

Looks good 🎉 - throw up the PR for review, I might get a few 👀 onto it

[jooj123]

Done - closing