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 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).