Skip to content

Hidden API

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

Import

import Hidden from '@material-ui/core/Hidden';
// or
import { Hidden } from '@material-ui/core';

You can learn more about the difference by reading this guide.

Responsively hides children based on the selected implementation.

Props

Name Type Default Description
children node The content of the component.
implementation 'css'
| 'js'
'js' Specify which implementation to use. 'js' is the default, 'css' works better for server-side rendering.
initialWidth 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
You can use this prop 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 a 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 are hidden.
lgUp bool false If true, screens this size and up are hidden.
mdDown bool false If true, screens this size and down are hidden.
mdUp bool false If true, screens this size and up are hidden.
only 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| Array<'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'>
Hide the given breakpoint(s).
smDown bool false If true, screens this size and down are hidden.
smUp bool false If true, screens this size and up are hidden.
xlDown bool false If true, screens this size and down are hidden.
xlUp bool false If true, screens this size and up are hidden.
xsDown bool false If true, screens this size and down are hidden.
xsUp bool false If true, screens this size and up are hidden.

The component cannot hold a ref.

Any other props supplied will be provided to the root element (native element).

Demos