react-case-when

react-case-when is a small module that provides two simple components to simplify conditional rendering in React.

Installation

npm install react-case-when --save

yarn add react-case-when

Getting Started

They work similar to switch/case statements:

import { Switch, Case } from 'react-case-when'

function UserAge ({ age })  {
  // When `Case` is wrapped by a Switch,
  // only the first case that matches is rendered:
  return (
    <Switch>
      <Case when={age >= 0 && age < 2}>
        <p>User is a baby</p>
      </Case>
      <Case when={age < 12}>
        <p>User is a child</p>
      </Case>
      <Case when={age < 18}>
        User is a teenager
      </Case>
      <Case>
        /* Lazy evaluation is also supported */
        {() => <Message>User is of age</Message>}
      </Case>
    </Switch>
  )
}

You can use Case independently of Switch:

import { Case } from 'react-case-when'

function SomeComponent ({ user })  {
  return (
    <div>
      ...
      <Case when={user.isAdmin()}>
        <RestrictedContent />
      </Case>
    </div>
  )
}

API

The module only exports two components:

• Case
• Switch

<Case />

It will only render if when prop is true or null/undefined. Otherwise, it won't render anything.

<Case>
  It will always render because `when` is undefined
</Case>
<Case when={false}>
  Will NOT render
</Case>
<Case when='test'>
  Will NOT render
</Case>
<Case when={'test'.length > 0}>
  Will render because when is true
</Case>

Lazy evaluation

For lazy evaluation, you can pass a function to the children prop:

<Case>
  {() => <SomeComponent />}
</Case>

Props

| Name | Default Value | Description | |---------|----------------|-------------------------| | when | null | Renders if it is true or null/undefined | | | as | React.Fragment | what Case will render as |

<Switch />

You can use the Switch component to wrap a group of Cases to ensure that only the first one that matches is rendered.

<Switch>
  <Case when={status === 'ACTIVE'} as='p'>
     Status is ACTIVE
  </Case>
  <Case when={status === 'CLOSED'} as='p'>
     Status is CLOSED
  </Case>
  <Case as='p'>
     Status is neither active or closed
  </Case>
</Switch>

Tests

You have to install all dependencies, then just run: npm test

License

MIT