tessl/npm-react-if

React components for clean, declarative conditional rendering with async support

—

Pending

Overview

Eval results

Files

Basic Conditional Rendering

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

Core If/Then/Else components for standard conditional rendering scenarios. These components provide clear, readable alternatives to JavaScript ternary operators and complex conditional logic.

Capabilities

If Component

Primary conditional rendering component that evaluates a condition and renders either Then or Else blocks based on the result.

/**
 * If condition evaluates to true, renders the <Then /> block,
 * otherwise renders the <Else /> block. Either block may be omitted.
 * Can contain any number of <Then /> or <Else /> blocks,
 * but only the first matching block will be rendered.
 */
const If: FC<{
  condition: BooleanLike | (() => BooleanLike);
  keepAlive?: boolean;
  children: ReactNode;
}>;

Usage Examples:

import { If, Then, Else } from "react-if";

// Basic boolean condition
<If condition={user.isActive}>
  <Then>
    <span className="status-active">User is active</span>
  </Then>
  <Else>
    <span className="status-inactive">User is inactive</span>
  </Else>
</If>

// Function condition for lazy evaluation
<If condition={() => expensiveComputation() > threshold}>
  <Then>
    <ExpensiveComponent />
  </Then>
  <Else>
    <SimpleComponent />
  </Else>
</If>

// Multiple Then/Else blocks (first matching type renders)
<If condition={score >= 90}>
  <Then>Grade: A</Then>
  <Then>This won't render</Then>
  <Else>Grade: Below A</Else>
</If>

Then Component

Content block that renders when the parent If condition evaluates to true.

/**
 * Must contain only a single child, which it renders as-is.
 * Should not be used outside of an <If /> block.
 * Renders when parent If condition is true.
 */
const Then: FC<{
  children?: ReactNode | (() => JSX.Element);
}>;

Usage Examples:

// Static content
<Then>
  <div>Content to show when condition is true</div>
</Then>

// Function children for lazy evaluation
<Then>
  {() => <ExpensiveComponent data={heavyComputation()} />}
</Then>

// Multiple elements
<Then>
  <h1>Success!</h1>
  <p>Operation completed successfully.</p>
</Then>

Else Component

Content block that renders when the parent If condition evaluates to false.

/**
 * Must contain only a single child, which it renders as-is.
 * Should not be used outside of an <If /> block.
 * Renders when parent If condition is false.
 */
const Else: FC<{
  children?: ReactNode | (() => JSX.Element);
}>;

Usage Examples:

// Static content
<Else>
  <div>Content to show when condition is false</div>
</Else>

// Function children for lazy evaluation
<Else>
  {() => <DefaultComponent />}
</Else>

// Error handling
<Else>
  <div className="error">
    <span>Something went wrong</span>
    <button onClick={retry}>Retry</button>
  </div>
</Else>

Performance Optimization

Lazy Evaluation with Function Children

Use function children to prevent unnecessary computation when conditions are false:

const DataDisplay = ({ shouldShow, data }) => (
  <If condition={shouldShow}>
    <Then>
      {() => {
        // This expensive operation only runs when condition is true
        const processedData = expensiveDataProcessing(data);
        return <DataVisualization data={processedData} />;
      }}
    </Then>
    <Else>
      <div>No data to display</div>
    </Else>
  </If>
);

Nested Conditions

Complex conditional logic can be expressed through component nesting:

<If condition={user.isLoggedIn}>
  <Then>
    <If condition={user.isAdmin}>
      <Then>
        <AdminPanel />
      </Then>
      <Else>
        <UserDashboard />
      </Else>
    </If>
  </Then>
  <Else>
    <LoginForm />
  </Else>
</If>

Type Definitions

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

type ComponentWithConditionProps<P = {}> = P & PropsWithChildren<{
  condition: (() => BooleanLike) | BooleanLike;
}>;

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

Install with Tessl CLI