or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

async-conditions.mdbasic-conditions.mdindex.mdshorthand.mdswitch-case.md
tile.json

tessl/npm-react-if

React components for clean, declarative conditional rendering with async support

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-if@4.1.x

To install, run

npx @tessl/cli install tessl/npm-react-if@4.1.0

index.mddocs/

React If

React If provides clean, declarative components for conditional rendering in React applications. It replaces verbose ternary operators and complex conditional logic with readable, expressive JSX components that support both synchronous conditions and asynchronous Promise-based conditions.

Package Information

  • Package Name: react-if
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-if

Core Imports

import { If, Then, Else, When, Unless, Switch, Case, Default, Fallback } from "react-if";

For CommonJS:

const { If, Then, Else, When, Unless, Switch, Case, Default, Fallback } = require("react-if");

Basic Usage

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

const UserProfile = ({ user, isLoggedIn, age, drinkingAge }) => (
  <div>
    {/* Basic conditional rendering */}
    <If condition={isLoggedIn}>
      <Then>
        <span>Welcome, {user.name}!</span>
      </Then>
      <Else>
        <span>Please log in</span>
      </Else>
    </If>

    {/* Shorthand for simple conditions */}
    <When condition={age >= drinkingAge}>
      <span>You can have a beer!</span>
    </When>

    <Unless condition={user.isVerified}>
      <div className="warning">Please verify your account</div>
    </Unless>
  </div>
);

Architecture

React If is built around several key design patterns:

  • Declarative Syntax: JSX components that clearly express conditional logic intent
  • Lazy Evaluation: Function children support for performance optimization of expensive operations
  • Promise Integration: Built-in support for asynchronous conditions with loading states
  • Type Safety: Full TypeScript integration with proper prop validation
  • Component Composition: Nested conditions and complex branching through component composition
  • Performance Optimized: Function children support prevents unnecessary re-renders and expensive computations

Capabilities

Basic Conditional Rendering

Core If/Then/Else pattern for standard conditional rendering scenarios. Provides clear alternatives to ternary operators.

const If: FC<{
  condition: BooleanLike | (() => BooleanLike);
  keepAlive?: boolean;
  children: ReactNode;
}>;

const Then: FC<{ children?: ReactNode | (() => JSX.Element) }>;
const Else: FC<{ children?: ReactNode | (() => JSX.Element) }>;

Basic Conditional Rendering

Switch/Case Pattern

Multi-condition branching similar to switch statements, with support for multiple Cases and a Default fallback.

const Switch: FC<{ children: ReactNode }>;
const Case: FC<{
  condition: BooleanLike | (() => BooleanLike);
  children?: ReactNode | (() => JSX.Element);
}>;
const Default: FC<{ children?: ReactNode | (() => JSX.Element) }>;

Switch/Case Pattern

Shorthand Components

Simplified components for common single-condition scenarios without the need for explicit Then/Else blocks.

const When: FC<{
  condition: BooleanLike | (() => BooleanLike);
  children?: ReactNode | (() => JSX.Element);
}>;

const Unless: FC<{
  condition: BooleanLike | (() => BooleanLike);
  children?: ReactNode | (() => JSX.Element);
}>;

Shorthand Components

Asynchronous Conditions

Promise-based conditional rendering with loading states, error handling, and promise cancellation support.

const If: FC<{
  condition: Promise<any>;
  keepAlive?: boolean;
  children: ReactNode;
}>;

const Fallback: FC<{ children?: ReactNode | (() => JSX.Element) }>;

Asynchronous Conditions

Core Types

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

interface ExtendablePromise<T> extends Promise<T> {
  [index: string]: any;
}

interface CancellablePromise {
  promise: ExtendablePromise<any>;
  cancel: () => void;
}

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

interface AsyncSupportProps {
  keepAlive?: boolean;
}