Skip to content

Commit

Permalink
docs(responsive): Use Responsive instead of Media in example :
Browse files Browse the repository at this point in the history
  • Loading branch information
@lzcabrera
lzcabrera committed Feb 1, 2018
1 parent 469f194 commit 2d25da5
Showing 1 changed file with 6 additions and 2 deletions.
8 changes: 6 additions & 2 deletions src/components/Responsive/Responsive.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,16 @@ When rendering on the server you can use the `defaultMatches` prop to set the in
We cannot be 100% sure what the client will render, but we can make an educated guess by sniffing the user agent and populating your redux store with that information before triggering a React render:

```
const isUserAgentSignallingMobile = () => {
return true;
};
<div>
<Media query="(max-width: 500px)" defaultMatches={isUserAgentSignallingMobile()} render={() => (
<Responsive maxWidth="md" defaultMatches={isUserAgentSignallingMobile()} render={() => (
<Text>Render me below medium breakpoint.</Text>
)}/>
<Media query="(min-width: 501px)" defaultMatches={!isUserAgentSignallingMobile()} render={() => (
<Responsive minWidth="md" defaultMatches={!isUserAgentSignallingMobile()} render={() => (
<Text>Render me above medium breakpoint.</Text>
)}/>
</div>
Expand Down

1 comment on commit 2d25da5

@ryanoglesby08
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the idea of the example. I have a suggestion to build on top of it and maybe make it a bit more clear:

<Responsive maxWidth="md" defaultMatches={state.device === 'mobile'} render={() => (
  <Text>Render me below medium breakpoint.</Text>
)}/>

<Responsive minWidth="md" defaultMatches={state.device === 'desktop'} render={() => (
  <Text>Render me above medium breakpoint.</Text>
)}/>

Please sign in to comment.