Skip to content
Edit this page

Hidden API

API reference docs for the React Hidden component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import Hidden from '@mui/material/Hidden';
// or
import { Hidden } from '@mui/material';
Learn about the difference by reading this guide on minimizing bundle size.

Responsively hides children based on the selected implementation.

Props

Props of the native component are also available.

children

The content of the component.

Type:

node
implementation

Specify which implementation to use. 'js' is the default, 'css' works better for server-side rendering.

Type:

'css' | 'js'

Default:

'js'
initialWidth

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

Type:

'xs' | 'sm' | 'md' | 'lg' | 'xl'
lgDown

If true, component is hidden on screens below (but not including) this size.

Type:

bool

Default:

false
lgUp

If true, component is hidden on screens this size and above.

Type:

bool

Default:

false
mdDown

If true, component is hidden on screens below (but not including) this size.

Type:

bool

Default:

false
mdUp

If true, component is hidden on screens this size and above.

Type:

bool

Default:

false
only

Hide the given breakpoint(s).

Type:

'xs' | 'sm' | 'md' | 'lg' | 'xl' | Array<'xs' | 'sm' | 'md' | 'lg' | 'xl'>
smDown

If true, component is hidden on screens below (but not including) this size.

Type:

bool

Default:

false
smUp

If true, component is hidden on screens this size and above.

Type:

bool

Default:

false
xlDown

If true, component is hidden on screens below (but not including) this size.

Type:

bool

Default:

false
xlUp

If true, component is hidden on screens this size and above.

Type:

bool

Default:

false
xsDown

If true, component is hidden on screens below (but not including) this size.

Type:

bool

Default:

false
xsUp

If true, component is hidden on screens this size and above.

Type:

bool

Default:

false
The component cannot hold a ref.