react-display-switch

    0.4.3 • Public • Published

    react-display-switch

    Declarative React Components for improving readability by eliminating { }, && and ternary operators out of JSX

    CircleCI

    Usage

    When

    <When screen_xs>contents for small screen</When>

    or

    <When screen_md or screen_lg>contents for medium or large screen</When>

    and

    <When admin_user and enable_google_analytics>
      <a href='./google-analytics-settings'>google analytics settings</a>
    </When>

    register conditions

    import {When} from 'react-display-switch'
     
    When.case('screen_xs', () => window.innerWidth < 768)
    When.case('screen_md', () => !When.screen_xs && window.innerWidth < 992)
    When.case('screen_lg', () => window.innerWidth >= 992)
    When.case('admin_user', () => user.admin === true)
    When.case('enable_google_analytics', () => process.env.ENABLE_GOOGLE_ANALYTICS)

    WhenNot

    import {When, WhenNot} from 'react-display-switch'
    <WhenNot login_user><a href='/login'>please login</a></WhenNot>

    Sample

    see ./sample

    Install

    npm i react-display-switch

    DownloadsWeekly Downloads

    34

    Version

    0.4.3

    License

    MIT

    Unpacked Size

    12.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • shokai