Hidden API
API reference docs for the React Hidden component. Learn about the props, CSS, and other APIs of this exported module.
Component demos
Import
import Hidden from '@mui/material/Hidden';
// or
import { Hidden } from '@mui/material';
Responsively hides children based on the selected implementation.
Props of the native component are also available.
Specify which implementation to use. 'js' is the default, 'css' works better for server-side rendering.
Type:'css'
| 'js'
Default:'js'
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'
If true
, component is hidden on screens below (but not including) this size.
Type:bool
Default:false
If true
, component is hidden on screens below (but not including) this size.
Type:bool
Default:false
Hide the given breakpoint(s).
Type:'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| Array<'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'>
If true
, component is hidden on screens below (but not including) this size.
Type:bool
Default:false
If true
, component is hidden on screens below (but not including) this size.
Type:bool
Default:false
If true
, component is hidden on screens below (but not including) this size.
Type:bool
Default:false