Hidden API
API documentation for the React Hidden component. Learn about the available props, and the CSS API.
Import
import Hidden from '@material-ui/core/Hidden';
// or
import { Hidden } from '@material-ui/core';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).