🎉 Material UI v4 is out now! Check out the announcement blog post →
Hidden

Hidden API

The API documentation of the Hidden React component. Learn more about the properties and the CSS customization points.

import Hidden from '@material-ui/core/Hidden';

Responsively hides children based on the selected implementation.

Props

Name Type Default Description
children node The content of the component.
implementation enum: 'js' |
 'css'
'js' Specify which implementation to use. 'js' is the default, 'css' works better for server-side rendering.
initialWidth enum: 'xs', 'sm', 'md', 'lg', 'xl'
You can use this property when choosing the js implementation with server-side rendering.
As window.innerWidth is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width.
For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint
lgDown bool false If true, screens this size and down will be hidden.
lgUp bool false If true, screens this size and up will be hidden.
mdDown bool false If true, screens this size and down will be hidden.
mdUp bool false If true, screens this size and up will be hidden.
only union: enum: 'xs', 'sm', 'md', 'lg', 'xl'
 |
 arrayOf
Hide the given breakpoint(s).
smDown bool false If true, screens this size and down will be hidden.
smUp bool false If true, screens this size and up will be hidden.
xlDown bool false If true, screens this size and down will be hidden.
xlUp bool false If true, screens this size and up will be hidden.
xsDown bool false If true, screens this size and down will be hidden.
xsUp bool false If true, screens this size and up will be hidden.

Any other properties supplied will be spread to the root element (native element).

Demos