@jouwomgeving/ui-responsive

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