with-width

v4.9.10

v4.5.2

v3.9.2

STATUS

Passing

DOWNLOADS

691

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

25 KB

innerWidth |xs sm md lg xl |-------|-------|-------|-------|------> width | xs | sm | md | lg | xl

React

2 contributors

Install with-width as a package?

Copied

npm i @bit/mui-org.material-ui.with-width

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';

innerWidth |xs sm md lg xl |-------|-------|-------|-------|------> width | xs | sm | md | lg | xl

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

Bypass the width calculation logic.