React-case-when

Description

Small components to simplify conditional rendering

Fork of react-case-when from @gsantiago but with types

Installation

# with npm
npm install @chipp972/react-case-when-ts
# with yarn
yarn add @chipp972/react-case-when-ts

Examples

import { Switch, Case } from '@chipp972/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 '@chipp972/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>

Changelog

1.0.1

• Remove react-dom peerDependency

1.0.0

• New Switch & Case components