Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add react-media-material-ui in the related projects #12068

Merged
merged 1 commit into from
Jul 6, 2018

Conversation

jedwards1211
Copy link
Contributor

just a little utility package I made :)

@oliviertassinari
Copy link
Member

oliviertassinari commented Jul 6, 2018

I see, it's an alternative to the Hidden component. I plan on working on a Display component in the future. I'm not very happy with the Hidden component right now. Also, one more important helper I want to work on is the Spacing. Most of the custom CSS we use on our pages product is about adding spacing. We might be able to abstract it like Bootstrap is doing.

@oliviertassinari oliviertassinari changed the title docs(related-projects.md): add react-media-material-ui [docs] Add react-media-material-ui in the related projects Jul 6, 2018
@oliviertassinari oliviertassinari added the docs Improvements or additions to the documentation label Jul 6, 2018
@oliviertassinari oliviertassinari merged commit d9a2946 into mui:master Jul 6, 2018
@jedwards1211
Copy link
Contributor Author

Hah! I didn't know about the Hidden component. What is it you're not happy about with it?

@oliviertassinari
Copy link
Member

oliviertassinari commented Jul 6, 2018

@jedwards1211 The hidden use case is too narrow, the behavior is inconsistent between the js and css implementation: #11850.
The docs: https://material-ui.com/layout/hidden/.

acroyear pushed a commit to acroyear/material-ui that referenced this pull request Jul 14, 2018
@jedwards1211
Copy link
Contributor Author

@oliviertassinari I just wanted to point out, I just learned about withMobileDialog. Using react-media-material-ui makes withMobileDialog unnecessary:

<BreakpointMedia max="sm">
  {(matches) => (
    <Dialog
      fullScreen={matches}

@oliviertassinari
Copy link
Member

oliviertassinari commented Oct 19, 2018

@jedwards1211 Or even: https://material-ui.com/layout/breakpoints/#render-props.

    <WithWidth>
      {({ width }) => <Typography variant="subtitle1">Current width: {width}</Typography>}
    </WithWidth>

@jedwards1211
Copy link
Contributor Author

Ah cool, the render prop version
isn't built-in, is it? I wish it were.

@oliviertassinari
Copy link
Member

@jedwards1211 Yeah, given how popular this pattern is, it's something we can expose directly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants