@jouwomgeving/ui-responsive v3.0.1
Responsive
$ npm install @jouwomgeving/ui-responsive
Viewport
Usage
import React from 'react';
import * as Responsive from '@jouwomgeving/ui-responsive';
function Layout() {
return (
<div>
<Responsive.Container gt="medium">
Shows above 768px
</Responsive.Container>
<Responsive.Container lte="medium">
Shows under 768px
</Responsive.Container>
</div>
)
}
export default Layout;
About
A component to hide or show certain react children, this will skip entire components from be rendered within in the React diffing algorithm.
The component has 6 different sizes to determine the viewport size;
- tiny: Lower or equal to 480px.
- small: Higher or equal to 481px;
- small: Lower or equal to: 768px;
- medium: Higher or equal to: 769px;
- medium: Lower or equal to: 920px;
- large: Higher or equal to: 921px;
Properties
Props | Values | Default | Required |
---|---|---|---|
children | ReactElement | Yes | |
lte | small, medium, large | No | |
lt | tiny, small, medium, large | No | |
eq | tiny, small, medium, large | No | |
gt | tiny, small, medium, large | No | |
gte | tiny, small, medium | No |
Container
Will be added when needed
10 days ago
2 months ago
2 years ago
2 years ago
2 years ago
2 years ago
4 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago