Media component only works when passing children prop rather than render prop

[Maayan Glikser]

The following does not work:

import { Media } from 'react-fns'

const Example = () =>
  <Media
    query="(min-width: 1000px)"
    render={(match) =>
     <div>
        {match ? 'mobile' : 'desktop'}
     </div>
    }
  />

export default Example

but this does:

import { Media } from 'react-fns'

const Example = () =>
  <Media
    query="(min-width: 1000px)"
    children={(match) =>
     <div>
        {match ? 'mobile' : 'desktop'}
     </div>
    }
  />

export default Example

[Mackie Underdown]

I was curious about this and could reproduce it on CodeSandbox:

[Gabriele Cimato]

From my understanding this is actually expected behavior, directly form the react-media docs we have:

or the common case of "only render something when the media query matches", you can use a render prop that is only called if the query matches.

In the example from this issue, we are matching the else clause of the ternary operator so the render prop returns null. I suppose that for this library the render method doesn't behave as we would imagine (meaning to just render what is provided). We can either create a fork of react-media with these changes (I am happy to do it) or submit a PR for react-media but then I don't know if that would break the old behavior.

[Marcin Zielinski]

Please update the example in the docs as shown by @morsdyce. I've lost 10 mins on investigating why this doesn't work as expected.

[Va Da]

Consider using react-universal-interface to avoid such issues.

[Arti Villa]

@Gabri3l the library doesn't work as intended, correct? I'd rather this moves to a breaking change.

[stale]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[stale]

Closed due to inactivity. Holler if this is a mistake, and we'll re-open it.