Tired of Ternary Hell? Clean Up Your React Conditionals with react-if-then-else-switch

As React developers, we spend a good chunk of our time rendering components conditionally. While JSX's built-in && operator and ternary ? : are powerful, they can quickly lead to deeply nested, unreadable code. We've all been there: a screen full of ? : that looks more like a syntax puzzle than a clear UI definition.

The Problem: When Conditionals Get Messy

Consider a common scenario where you need to render different content based on a user's role:

// The dreaded nested ternary operator
{user.isAdmin ? (
  <AdminDashboard />
) : user.isEditor ? (
  <EditorPanel />
) : user.isLoggedIn ? (
  <UserProfile />
) : (
  <LoginPage />
)}

Or perhaps a complex && chain for multiple conditions:

// Verbose && chains
{user.hasPermission && user.isActive && !user.isSuspended && (
  <div>
    <h2>Welcome!</h2>
    <p>You have access to premium features.</p>
  </div>
)}

While functional, these patterns often sacrifice readability, especially as your application grows. They don't clearly convey the "if this, else if that, else something else" flow that we're so used to from traditional programming languages.

The Solution: Declarative Conditionals with react-if-then-else-switch

This is where react-if-then-else-switch steps in. As the creator of this lightweight React library, my aim was to bring a more declarative, readable, and structured approach to conditional rendering. Inspired by classic if/else if/else and switch/case statements, it allows you to express your UI logic in a way that feels natural and intuitive.

Say hello to cleaner JSX:

1. IfElse for sequential conditions:

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

function UserAccess({ user }) {
  return (
    <IfElse>
      <If condition={user.isAdmin}>
        <AdminDashboard />
      </If>
      <ElIf condition={user.isEditor}>
        <EditorPanel />
      </ElIf>
      <ElIf condition={user.isLoggedIn}>
        <UserProfile />
      </ElIf>
      <Else>
        <LoginPage />
      </Else>
    </IfElse>
  );
}

Doesn't that just read better? You can immediately grasp the flow of logic.

1. Switchfor value-based matching:

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

function FeatureDisplay({ featureFlag }) {
  return (
    <Switch value={featureFlag}>
      <Case when="darkMode">
        <ThemeToggle isDark={true} />
      </Case>
      <Case when="notifications">
        <NotificationSettings />
      </Case>
      <Default>
        <ComingSoonMessage />
      </Default>
    </Switch>
  );
}

This brings the clarity of a switch statement directly into your JSX, making it incredibly clear which content renders for specific values.

✨ Key Features at a Glance:

• <IfElse> Wrapper: The central orchestrator for If, ElIf, and Else.
• <If>: Your primary condition.
• <ElIf>: For "else if" scenarios, evaluated only if preceding conditions are false.
• <Else>: The ultimate fallback if no If or ElIf condition is met.
• <Switch>: Match a value against various Case components.
• <Case>: Renders if its when prop matches the parent Switch's value.
• <Default>: The fallback for Switch if no Case matche s.

📦 Get Started Today!

Ready to clean up your React code? Install react-if-then-else-switch in your project:

npm install react-if-then-else-switch
# OR
yarn add react-if-then-else-switch

📚 Dive Deeper & Explore Demos

For detailed documentation, more examples, and interactive live demos, check out our project's page:

👉 View Documentation & Live Demos Here 👈

---

react-if-then-else-switch is an open-source project. I invite you to explore it, use it in your projects, and contribute! Your feedback and ideas are invaluable. Feel free to raise issues or submit pull requests on our GitHub Repository.

Happy coding!