0
# Shorthand Components
1

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

4
## Capabilities
5

6
### When Component
7

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

10
```typescript { .api }
11
/**
12
 * A shorthand for:
13
 * <If condition={...}>
14
 *   <Then>
15
 *     { ... }
16
 *   </Then>
17
 * </If>
18
 * 
19
 * The same rules apply to child elements as with using the <Then /> block.
20
 */
21
const When: FC<{
22
  condition: BooleanLike | (() => BooleanLike);
23
  children?: ReactNode | (() => JSX.Element);
24
}>;
25
```
26

27
**Usage Examples:**
28

29
```typescript
30
import { When } from "react-if";
31

32
// Simple boolean condition
33
<When condition={user.isLoggedIn}>
34
  <WelcomeMessage user={user} />
35
</When>
36

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

42
// Function children for lazy evaluation
43
<When condition={showChart}>
44
  {() => <Chart data={generateChartData()} />}
45
</When>
46

47
// Multiple children
48
<When condition={hasNotifications}>
49
  <NotificationBadge count={notificationCount} />
50
  <NotificationList notifications={notifications} />
51
</When>
52
```
53

54
### Unless Component
55

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

58
```typescript { .api }
59
/**
60
 * A shorthand for:
61
 * <If condition={...}>
62
 *   <Else>
63
 *     { ... }
64
 *   </Else>
65
 * </If>
66
 * 
67
 * The same rules apply to child elements as with using the <Else /> block.
68
 */
69
const Unless: FC<{
70
  condition: BooleanLike | (() => BooleanLike);
71
  children?: ReactNode | (() => JSX.Element);
72
}>;
73
```
74

75
**Usage Examples:**
76

77
```typescript
78
import { Unless } from "react-if";
79

80
// Simple boolean condition (inverted)
81
<Unless condition={user.isVerified}>
82
  <VerificationBanner />
83
</Unless>
84

85
// Function condition for complex logic
86
<Unless condition={() => subscription.isActive}>
87
  <UpgradePrompt />
88
</Unless>
89

90
// Function children for lazy evaluation
91
<Unless condition={isLoading}>
92
  {() => <DataTable data={processTableData()} />}
93
</Unless>
94

95
// Error states
96
<Unless condition={isValid}>
97
  <div className="error-message">
98
    Please fix the errors below before continuing.
99
  </div>
100
</Unless>
101
```
102

103
## Common Usage Patterns
104

105
### Conditional Visibility
106

107
Use When/Unless for simple show/hide logic:
108

109
```typescript
110
const Dashboard = ({ user, settings }) => (
111
  <div className="dashboard">
112
    <h1>Dashboard</h1>
113
    
114
    <When condition={user.hasNewMessages}>
115
      <MessageAlert />
116
    </When>
117
    
118
    <Unless condition={settings.hideWelcome}>
119
      <WelcomeWidget />
120
    </Unless>
121
    
122
    <When condition={user.isAdmin}>
123
      <AdminPanel />
124
    </When>
125
  </div>
126
);
127
```
128

129
### Form Validation
130

131
Show validation messages and controls:
132

133
```typescript
134
const LoginForm = ({ formData, errors, isSubmitting }) => (
135
  <form>
136
    <input name="email" value={formData.email} />
137
    <Unless condition={!errors.email}>
138
      <span className="error">{errors.email}</span>
139
    </Unless>
140
    
141
    <input name="password" type="password" value={formData.password} />
142
    <Unless condition={!errors.password}>
143
      <span className="error">{errors.password}</span>
144
    </Unless>
145
    
146
    <Unless condition={isSubmitting}>
147
      <button type="submit">Login</button>
148
    </Unless>
149
    
150
    <When condition={isSubmitting}>
151
      <LoadingSpinner />
152
    </When>
153
  </form>
154
);
155
```
156

157
### Feature Flags
158

159
Control feature visibility based on flags or user roles:
160

161
```typescript
162
const ProductPage = ({ product, user, featureFlags }) => (
163
  <div>
164
    <ProductDetails product={product} />
165
    
166
    <When condition={featureFlags.enableReviews}>
167
      <ProductReviews productId={product.id} />
168
    </When>
169
    
170
    <When condition={() => user.canPurchase && product.inStock}>
171
      <PurchaseButton product={product} />
172
    </When>
173
    
174
    <Unless condition={product.inStock}>
175
      <OutOfStockNotice />
176
    </Unless>
177
    
178
    <When condition={user.isPremium}>
179
      <PremiumFeatures product={product} />
180
    </When>
181
  </div>
182
);
183
```
184

185
### Performance with Function Children
186

187
Optimize expensive operations using function children:
188

189
```typescript
190
const Analytics = ({ showReports, data }) => (
191
  <div>
192
    <When condition={showReports}>
193
      {() => {
194
        // Only process heavy analytics when actually showing
195
        const reportData = processAnalyticsData(data);
196
        const charts = generateCharts(reportData);
197
        return <ReportsView data={reportData} charts={charts} />;
198
      }}
199
    </When>
200
    
201
    <Unless condition={data.length > 0}>
202
      <div>No data available for analysis</div>
203
    </Unless>
204
  </div>
205
);
206
```
207

208
### Combining When and Unless
209

210
Use both components together for clear conditional logic:
211

212
```typescript
213
const UserProfile = ({ user, isEditing }) => (
214
  <div className="profile">
215
    <When condition={!isEditing}>
216
      <ProfileDisplay user={user} />
217
    </When>
218
    
219
    <When condition={isEditing}>
220
      <ProfileEditForm user={user} />
221
    </When>
222
    
223
    <Unless condition={user.profileComplete}>
224
      <div className="warning">
225
        Please complete your profile to access all features.
226
      </div>
227
    </Unless>
228
  </div>
229
);
230
```
231

232
## Type Definitions
233

234
```typescript { .api }
235
type ComponentWithConditionPropsWithFunctionChildren<P = {}> = P & {
236
  condition: (() => BooleanLike) | BooleanLike;
237
  children?: ReactNode | undefined | ((...args: unknown[]) => JSX.Element);
238
};
239

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