Hidden API
The Hidden component was deprecated in Material UI v5. To learn more, see the Hidden section of the migration docs. API reference docs for the React Hidden component. Learn about the props, CSS, and other APIs of this exported module.
For examples and details on the usage of this React component, visit the component demo pages:
import Hidden from '@mui/material/Hidden';
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 of the native component are also available.
| 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, component is hidden on screens below (but not including) this size. |
| lgUp | bool | false | If true, component is hidden on screens this size and above. |
| mdDown | bool | false | If true, component is hidden on screens below (but not including) this size. |
| mdUp | bool | false | If true, component is hidden on screens this size and above. |
| only | 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| Array<'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'> | - | Hide the given breakpoint(s). |
| smDown | bool | false | If true, component is hidden on screens below (but not including) this size. |
| smUp | bool | false | If true, component is hidden on screens this size and above. |
| xlDown | bool | false | If true, component is hidden on screens below (but not including) this size. |
| xlUp | bool | false | If true, component is hidden on screens this size and above. |
| xsDown | bool | false | If true, component is hidden on screens below (but not including) this size. |
| xsUp | bool | false | If true, component is hidden on screens this size and above. |
The component cannot hold a ref.
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.