react-if-then-else-switch

Installation

First, install the package in your React project:

npm install react-if-then-else-switch

Or if you use Yarn:

yarn add react-if-then-else-switch

The `IfElse`, `If`, `ElIf`, and `Else` Components

The `IfElse` component acts as a wrapper for your conditional logic. It should contain one `If` component, zero or more `ElIf` (else-if) components, and an optional `Else` component. The `IfElse` component will render the content of the first child (`If` or `ElIf`) whose `condition` prop is `true`. If no conditions are met, it will render the content of the `Else` component if provided.

Usage: `IfElse` with `If` and `Else`

import { IfElse, If, Else } from 'react-if-then-else-switch';

function MyComponent({ isLoggedIn }) {
  return (
    <IfElse>
      <If condition={isLoggedIn}>
        <p>Welcome back!</p>
      </If>
      <Else>
        <p>Please log in.</p>
      </Else>
    </IfElse>
  );
}

Live Example: `IfElse` with `If` and `Else`

Usage: `IfElse` with `If` (without `Else`)

If the `If` condition is `false` and no `Else` component is provided within `IfElse`, nothing will be rendered.

import { IfElse, If } from 'react-if-then-else-switch';

function MyComponent({ showAdminPanel }) {
  return (
    <IfElse>
      <If condition={showAdminPanel}>
        <button>Admin Panel</button>
      </If>
    </IfElse>
  );
}

Live Example: `IfElse` with `If` (without `Else`)

The `ElIf` (Else If) Component

The `ElIf` component allows you to add additional conditional branches within an `IfElse` block. It will only be evaluated if the preceding `If` and `ElIf` conditions (if any) were `false`. You can include multiple `ElIf` components.

Usage: `IfElse` with `If`, `ElIf`, and `Else`

import { IfElse, If, ElIf, Else } from 'react-if-then-else-switch';

function TemperatureDisplay({ temp }) {
  return (
    <IfElse>
      <If condition={temp > 30}>
        <p>It's hot!</p>
      </If>
      <ElIf condition={temp > 20}>
        <p>It's warm.</p>
      </ElIf>
      <ElIf condition={temp > 10}>
        <p>It's mild.</p>
      </ElIf>
      <Else>
        <p>It's cold.</p>
      </Else>
    </IfElse>
  );
}

Live Example: `IfElse` with `If`, `ElIf`, and `Else`

The `Switch`, `Case`, and `Default` Components

The `Switch` component allows you to render content based on a specific `value`, similar to a JavaScript `switch` statement. Each `Case` component has a `when` prop, and the first `Case` whose `when` prop strictly matches the `Switch`'s `value` will be rendered. If no `Case` matches, the `Default` component (if provided) will be rendered.

Usage

import { Switch, Case, Default } from 'react-if-then-else-switch';

function UserDashboard({ role }) {
  return (
    <Switch value={role}>
      <Case when="admin">
        <p>Admin Dashboard</p>
      </Case>
      <Case when="editor">
        <p>Editor Tools</p>
      </Case>
      <Default>
        <p>User Profile</p>
      </Default>
    </Switch>
  );
}

Live Example: Switch/Case/Default

Why use this library?

• Readability: For complex conditional logic, these components can make your JSX more declarative and easier to follow than nested ternary operators or `&&` chains.
• Consistency: Provides a standardized way to handle conditional rendering across your application.
• Maintainability: Encapsulates conditional logic, making it easier to modify or extend.