@jouwomgeving/ui-responsive

    2.0.3 • Public • Published

    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

    Keywords

    none

    Install

    npm i @jouwomgeving/ui-responsive

    DownloadsWeekly Downloads

    49

    Version

    2.0.3

    License

    UNLICENSED

    Unpacked Size

    38.3 kB

    Total Files

    18

    Last publish

    Collaborators

    • gaaltink.avinty
    • marcelblijleven_avinty
    • ivanhulzen
    • dkainama
    • rvanleeuwen
    • heesink
    • hellobramkok
    • dbunskoek