react-display-switch

ReactのJSXの中から{と}と&&と三項演算子を無くして、可読性を上げる部品を作った

より宣言的に書けるようになる

条件判定して中身を表示する

<When screen_xs>小さい画面</When>

<When screen_md or screen_lg>中画面と大画面で表示するコンテンツ</When>

and

<When admin_user and enable_google_analytics>管理者専用Google analytics設定画面</When>

条件を登録しておくと使える

code:js

import {When} from 'react-display-switch'

When.case('screen_xs', () => window.innerWidth < 768)

When.case('screen_md', () => !When.case('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)

反転条件

code:js

import {When, WhenNot} from 'react-display-switch'

<a href='/login'>please login</a>

</WhenNot>