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 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 | '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 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. |
The component cannot hold a ref.
Any other props supplied will be provided to the root element (native element).