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

Package Sidebar

Install

npm i react-display-switch

Weekly Downloads

124

Version

0.4.3

License

MIT

Unpacked Size

12.5 kB

Total Files

6

Last publish

Collaborators

  • shokai