react-display-switch

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

• https://github.com/shokai/react-display-switch
• https://npmjs.com/package/react-display-switch

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