tessl/npm-react-if

React components for clean, declarative conditional rendering with async support

—

Pending

Overview

Eval results

Files

Shorthand Components

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

Simplified components for common single-condition scenarios. These provide convenient shortcuts that eliminate the need for explicit Then/Else blocks in simple conditional rendering.

Capabilities

When Component

Shorthand for If/Then pattern that renders children only when the condition is true.

/**
 * A shorthand for:
 * <If condition={...}>
 *   <Then>
 *     { ... }
 *   </Then>
 * </If>
 * 
 * The same rules apply to child elements as with using the <Then /> block.
 */
const When: FC<{
  condition: BooleanLike | (() => BooleanLike);
  children?: ReactNode | (() => JSX.Element);
}>;

Usage Examples:

import { When } from "react-if";

// Simple boolean condition
<When condition={user.isLoggedIn}>
  <WelcomeMessage user={user} />
</When>

// Function condition for complex logic
<When condition={() => permissions.includes("admin")}>
  <AdminToolbar />
</When>

// Function children for lazy evaluation
<When condition={showChart}>
  {() => <Chart data={generateChartData()} />}
</When>

// Multiple children
<When condition={hasNotifications}>
  <NotificationBadge count={notificationCount} />
  <NotificationList notifications={notifications} />
</When>

Unless Component

Shorthand for If/Else pattern that renders children only when the condition is false (inverted logic).

/**
 * A shorthand for:
 * <If condition={...}>
 *   <Else>
 *     { ... }
 *   </Else>
 * </If>
 * 
 * The same rules apply to child elements as with using the <Else /> block.
 */
const Unless: FC<{
  condition: BooleanLike | (() => BooleanLike);
  children?: ReactNode | (() => JSX.Element);
}>;

Usage Examples:

import { Unless } from "react-if";

// Simple boolean condition (inverted)
<Unless condition={user.isVerified}>
  <VerificationBanner />
</Unless>

// Function condition for complex logic
<Unless condition={() => subscription.isActive}>
  <UpgradePrompt />
</Unless>

// Function children for lazy evaluation
<Unless condition={isLoading}>
  {() => <DataTable data={processTableData()} />}
</Unless>

// Error states
<Unless condition={isValid}>
  <div className="error-message">
    Please fix the errors below before continuing.
  </div>
</Unless>

Common Usage Patterns

Conditional Visibility

Use When/Unless for simple show/hide logic:

const Dashboard = ({ user, settings }) => (
  <div className="dashboard">
    <h1>Dashboard</h1>
    
    <When condition={user.hasNewMessages}>
      <MessageAlert />
    </When>
    
    <Unless condition={settings.hideWelcome}>
      <WelcomeWidget />
    </Unless>
    
    <When condition={user.isAdmin}>
      <AdminPanel />
    </When>
  </div>
);

Form Validation

Show validation messages and controls:

const LoginForm = ({ formData, errors, isSubmitting }) => (
  <form>
    <input name="email" value={formData.email} />
    <Unless condition={!errors.email}>
      <span className="error">{errors.email}</span>
    </Unless>
    
    <input name="password" type="password" value={formData.password} />
    <Unless condition={!errors.password}>
      <span className="error">{errors.password}</span>
    </Unless>
    
    <Unless condition={isSubmitting}>
      <button type="submit">Login</button>
    </Unless>
    
    <When condition={isSubmitting}>
      <LoadingSpinner />
    </When>
  </form>
);

Feature Flags

Control feature visibility based on flags or user roles:

const ProductPage = ({ product, user, featureFlags }) => (
  <div>
    <ProductDetails product={product} />
    
    <When condition={featureFlags.enableReviews}>
      <ProductReviews productId={product.id} />
    </When>
    
    <When condition={() => user.canPurchase && product.inStock}>
      <PurchaseButton product={product} />
    </When>
    
    <Unless condition={product.inStock}>
      <OutOfStockNotice />
    </Unless>
    
    <When condition={user.isPremium}>
      <PremiumFeatures product={product} />
    </When>
  </div>
);

Performance with Function Children

Optimize expensive operations using function children:

const Analytics = ({ showReports, data }) => (
  <div>
    <When condition={showReports}>
      {() => {
        // Only process heavy analytics when actually showing
        const reportData = processAnalyticsData(data);
        const charts = generateCharts(reportData);
        return <ReportsView data={reportData} charts={charts} />;
      }}
    </When>
    
    <Unless condition={data.length > 0}>
      <div>No data available for analysis</div>
    </Unless>
  </div>
);

Combining When and Unless

Use both components together for clear conditional logic:

const UserProfile = ({ user, isEditing }) => (
  <div className="profile">
    <When condition={!isEditing}>
      <ProfileDisplay user={user} />
    </When>
    
    <When condition={isEditing}>
      <ProfileEditForm user={user} />
    </When>
    
    <Unless condition={user.profileComplete}>
      <div className="warning">
        Please complete your profile to access all features.
      </div>
    </Unless>
  </div>
);

Type Definitions

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

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

Install with Tessl CLI