hidden

v4.9.10

v4.5.2

v3.9.2

STATUS

Passing

DOWNLOADS

321

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

26 KB

Specify which implementation to use.

React

2 contributors

Install hidden as a package?

Copied

npm i @bit/mui-org.material-ui.hidden

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

Specify which implementation to use. ‘js’ is the default, ‘css’ works better for server-side rendering.

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

If true, screens this size and down will be hidden.

If true, screens this size and up will be hidden.

If true, screens this size and down will be hidden.

If true, screens this size and up will be hidden.

Hide the given breakpoint(s).

If true, screens this size and down will be hidden.

If true, screens this size and up will be hidden.

If true, screens this size and down will be hidden.

If true, screens this size and up will be hidden.

If true, screens this size and down will be hidden.

If true, screens this size and up will be hidden.

Responsively hides children based on the selected implementation. Demos:

Hidden

API:

Hidden API

Hidden ()

Responsively hides children based on the selected implementation.

The content of the component.

Specify which implementation to use. ‘js’ is the default, ‘css’ works better for server-side rendering.

You can use this prop when choosing the js implementation with server-side rendering.

For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint

If true, screens this size and down will be hidden.

If true, screens this size and up will be hidden.

If true, screens this size and down will be hidden.

If true, screens this size and up will be hidden.

Hide the given breakpoint(s).

If true, screens this size and down will be hidden.

If true, screens this size and up will be hidden.

If true, screens this size and down will be hidden.

If true, screens this size and up will be hidden.

If true, screens this size and down will be hidden.

If true, screens this size and up will be hidden.

Properties

Name	Type	Description
children	`node`	The content of the component.
className	`string`
implementation	`'js' \| 'css'`	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 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`	If `true`, screens this size and down will be hidden.
lgUp	`bool`	If `true`, screens this size and up will be hidden.
mdDown	`bool`	If `true`, screens this size and down will be hidden.
mdUp	`bool`	If `true`, screens this size and up will be hidden.
only	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'[]`	Hide the given breakpoint(s).
smDown	`bool`	If `true`, screens this size and down will be hidden.
smUp	`bool`	If `true`, screens this size and up will be hidden.
xlDown	`bool`	If `true`, screens this size and down will be hidden.
xlUp	`bool`	If `true`, screens this size and up will be hidden.
xsDown	`bool`	If `true`, screens this size and down will be hidden.
xsUp	`bool`	If `true`, screens this size and up will be hidden.
children	`node`	The content of the component.
classes (required)	`object`	Override or extend the styles applied to the component. See CSS API below for more details.
className	`string`
implementation	`'js' \| 'css'`	Specify which implementation to use. ‘js’ is the default, ‘css’ works better for server-side rendering.
lgDown	`bool`	If `true`, screens this size and down will be hidden.
lgUp	`bool`	If `true`, screens this size and up will be hidden.
mdDown	`bool`	If `true`, screens this size and down will be hidden.
mdUp	`bool`	If `true`, screens this size and up will be hidden.
only	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'[]`	Hide the given breakpoint(s).
smDown	`bool`	If `true`, screens this size and down will be hidden.
smUp	`bool`	If `true`, screens this size and up will be hidden.
xlDown	`bool`	If `true`, screens this size and down will be hidden.
xlUp	`bool`	If `true`, screens this size and up will be hidden.
xsDown	`bool`	If `true`, screens this size and down will be hidden.
xsUp	`bool`	If `true`, screens this size and up will be hidden.