0
# React If
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: react-if
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install react-if`
10

11
## Core Imports
12

13
```typescript
14
import { If, Then, Else, When, Unless, Switch, Case, Default, Fallback } from "react-if";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { If, Then, Else, When, Unless, Switch, Case, Default, Fallback } = require("react-if");
21
```
22

23
## Basic Usage
24

25
```typescript
26
import { If, Then, Else, When, Unless } from "react-if";
27

28
const UserProfile = ({ user, isLoggedIn, age, drinkingAge }) => (
29
  <div>
30
    {/* Basic conditional rendering */}
31
    <If condition={isLoggedIn}>
32
      <Then>
33
        <span>Welcome, {user.name}!</span>
34
      </Then>
35
      <Else>
36
        <span>Please log in</span>
37
      </Else>
38
    </If>
39

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

45
    <Unless condition={user.isVerified}>
46
      <div className="warning">Please verify your account</div>
47
    </Unless>
48
  </div>
49
);
50
```
51

52
## Architecture  
53

54
React If is built around several key design patterns:
55

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

63
## Capabilities
64

65
### Basic Conditional Rendering
66

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

69
```typescript { .api }
70
const If: FC<{
71
  condition: BooleanLike | (() => BooleanLike);
72
  keepAlive?: boolean;
73
  children: ReactNode;
74
}>;
75

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

80
[Basic Conditional Rendering](./basic-conditions.md)
81

82
### Switch/Case Pattern
83

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

86
```typescript { .api }
87
const Switch: FC<{ children: ReactNode }>;
88
const Case: FC<{
89
  condition: BooleanLike | (() => BooleanLike);
90
  children?: ReactNode | (() => JSX.Element);
91
}>;
92
const Default: FC<{ children?: ReactNode | (() => JSX.Element) }>;
93
```
94

95
[Switch/Case Pattern](./switch-case.md)
96

97
### Shorthand Components  
98

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

101
```typescript { .api }
102
const When: FC<{
103
  condition: BooleanLike | (() => BooleanLike);
104
  children?: ReactNode | (() => JSX.Element);
105
}>;
106

107
const Unless: FC<{
108
  condition: BooleanLike | (() => BooleanLike);
109
  children?: ReactNode | (() => JSX.Element);
110
}>;
111
```
112

113
[Shorthand Components](./shorthand.md)
114

115
### Asynchronous Conditions
116

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

119
```typescript { .api }
120
const If: FC<{
121
  condition: Promise<any>;
122
  keepAlive?: boolean;
123
  children: ReactNode;
124
}>;
125

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

129
[Asynchronous Conditions](./async-conditions.md)
130

131
## Core Types
132

133
```typescript { .api }
134
type BooleanLike = boolean | string | number | null | undefined | ExtendablePromise<any>;
135

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

140
interface CancellablePromise {
141
  promise: ExtendablePromise<any>;
142
  cancel: () => void;
143
}
144

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

149
interface AsyncSupportProps {
150
  keepAlive?: boolean;
151
}
152
```