tessl/npm-react-if

React components for clean, declarative conditional rendering with async support

—

Pending

Overview

Eval results

Files

Switch/Case Pattern

Name: tessl/npm-react-if
Author: tessl

Multi-condition branching components that provide a clean alternative to multiple if-else chains. Similar to JavaScript switch statements but with React component syntax.

Capabilities

Switch Component

Container component that evaluates multiple Case conditions and renders the first matching Case or the first Default component.

/**
 * Container for <Case /> and <Default /> blocks.
 * Renders the first matching Case, or the first encountered Default (or null).
 * Can contain any number of <Case /> and one <Default /> blocks.
 */
const Switch: FC<{
  children: ReactNode;
}>;

Usage Examples:

import { Switch, Case, Default } from "react-if";

// Basic switch pattern
<Switch>
  <Case condition={status === "loading"}>
    <LoadingSpinner />
  </Case>
  <Case condition={status === "error"}>
    <ErrorMessage />
  </Case>
  <Case condition={status === "success"}>
    <SuccessContent />
  </Case>
  <Default>
    <div>Unknown status</div>
  </Default>
</Switch>

// With function conditions
<Switch>
  <Case condition={() => score >= 90}>
    <Grade level="A" />
  </Case>
  <Case condition={() => score >= 80}>
    <Grade level="B" />
  </Case>
  <Case condition={() => score >= 70}>
    <Grade level="C" />
  </Case>
  <Default>
    <Grade level="F" />
  </Default>
</Switch>

Case Component

Conditional branch within a Switch that renders when its condition is true and it's the first matching case.

/**
 * If the Case is the first one to have its condition evaluate to true
 * inside the parent <Switch />, it will be the only one rendered.
 */
const Case: FC<{
  condition: BooleanLike | (() => BooleanLike);
  children?: ReactNode | (() => JSX.Element);
}>;

Usage Examples:

// Static condition
<Case condition={userRole === "admin"}>
  <AdminPanel />
</Case>

// Function condition for complex logic
<Case condition={() => {
  const permissions = getUserPermissions();
  return permissions.includes("write");
}}>
  <EditButton />
</Case>

// Function children for lazy evaluation
<Case condition={shouldShowChart}>
  {() => <ChartComponent data={processChartData()} />}
</Case>

Default Component

Fallback component that renders when no Case conditions match within a Switch.

/**
 * If no Case has its condition evaluate to true inside the parent <Switch />,
 * the first Default will be the only one rendered.
 */
const Default: FC<{
  children?: ReactNode | (() => JSX.Element);
}>;

Usage Examples:

// Static fallback content
<Default>
  <div className="fallback">No matching condition</div>
</Default>

// Function children
<Default>
  {() => <DefaultComponent />}
</Default>

// Error fallback
<Default>
  <div className="error">
    <h3>Unexpected State</h3>
    <p>Please contact support if this issue persists.</p>
  </div>
</Default>

Advanced Usage Patterns

Complex Multi-Condition Logic

const StatusDisplay = ({ user, connection, data }) => (
  <Switch>
    <Case condition={!connection.isOnline}>
      <OfflineIndicator />
    </Case>
    <Case condition={user.isGuest}>
      <GuestModeNotice />
    </Case>
    <Case condition={() => data.length === 0}>
      <EmptyState />
    </Case>
    <Case condition={() => data.some(item => item.isHighPriority)}>
      <PriorityDataView data={data} />
    </Case>
    <Default>
      <StandardDataView data={data} />
    </Default>
  </Switch>
);

Nested Switch Statements

<Switch>
  <Case condition={userType === "premium"}>
    <Switch>
      <Case condition={subscription.isActive}>
        <PremiumDashboard />
      </Case>
      <Default>
        <SubscriptionExpiredNotice />
      </Default>
    </Switch>
  </Case>
  <Case condition={userType === "basic"}>
    <BasicDashboard />
  </Case>
  <Default>
    <WelcomeScreen />
  </Default>
</Switch>

Performance Considerations

Use function children to avoid expensive computations in non-matching cases:

<Switch>
  <Case condition={renderMode === "chart"}>
    {() => {
      // Only process data when this case matches
      const chartData = processDataForChart(rawData);
      return <Chart data={chartData} />;
    }}
  </Case>
  <Case condition={renderMode === "table"}>
    {() => {
      // Only process data when this case matches  
      const tableData = processDataForTable(rawData);
      return <Table data={tableData} />;
    }}
  </Case>
  <Default>
    <div>Select a view mode</div>
  </Default>
</Switch>

Type Definitions

type BooleanLike = boolean | string | number | null | undefined | ExtendablePromise<any>;

type ComponentWithConditionPropsWithFunctionChildren<P = {}> = P & {
  condition: (() => BooleanLike) | BooleanLike;
  children?: ReactNode | undefined | ((...args: unknown[]) => JSX.Element);
};

type FunctionComponentWithImplicitChildren<P = {}> = FunctionComponent<{
  children?: ReactNode | undefined | ((...args: unknown[]) => JSX.Element);
} & P>;

Install with Tessl CLI