react-media-material-ui

An easy way to use breakpoints from your material-ui theme with (react-media)[https://github.com/ReactTraining/react-media]. This is a bit more flexible than material-ui's Hidden component because it allows you to render whatever you want if the query doesn't match, rather than just hiding the content.

This is also an especially convenient replacement for material-ui's withMobileDialog HOC:

<BreakpointMedia max="xs">
  {matches => (
    <Dialog
      fullScreen={matches}
      ...

Installation

npm install --save @material-ui/core react-media react-media-material-ui

Example

The following component will only render if the screen width is at least theme.breakpoints.values.sm (from your Material-UI theme).

import BreakpointMedia from 'react-media-material-ui/BreakpointMedia'

const HideOnMobile = ({children}) => (
  <BreakpointMedia min="sm">
    {children}
  </BreakpointMedia>
)

PropTypes

min ('xs' | 'sm' | 'md' | 'lg' | 'xl')

If given, will include minWidth: theme.breakpoints.up(props.min) in the query prop to react-media.

max ('xs' | 'sm' | 'md' | 'lg' | 'xl')

If given, will include maxWidth: theme.breakpoints.down(props.max) in the query prop to react-media.

children (((matches: boolean) => ?React.Node) | React.Node)

A function whose only argument will be a boolean flag that indicates whether the media query matches or not, returning what to render, or just a React node to be rendered if the query matches.

render (() => React.Node)

A function that is only called if the query matches, and returns what to render when the query matches.

defaultMatches (boolean)

When rendering on the server you can use this prop to set the initial state on the server to match whatever you think it will be on the client. You can detect the user's device by analyzing the user-agent string from the HTTP request in your server-side rendering code.

onChange ((matches: boolean) => any)

Callback fired when the status of the media query changes.

targetWindow (Window)

Can be specified if you want the query to be evaluated against a different window object than the one the code is running in. This can be useful for example if you are rendering part of your component tree to an iframe or a popup window.