Hidden API
The API documentation of the Hidden React component. Learn more about the properties and the CSS customization points.
import Hidden from '@material-ui/core/Hidden';Responsively hides children based on the selected implementation.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | node | The content of the component. | |
| implementation | enum: 'js' | 'css' |
'js' | Specify which implementation to use. 'js' is the default, 'css' works better for server-side rendering. |
| initialWidth | enum: '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 an 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 | union: enum: 'xs', 'sm', 'md', 'lg', 'xl' | arrayOf |
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 properties supplied will be provided to the root element (native element).
Notes
The component can cause issues in StrictMode.