✨ react-if-vz

 !Downloads

---

🌟 LIVE DEMO

react-if-vz is a lightweight, declarative conditional-rendering toolkit for React.

It helps you replace deeply nested ternaries and && chains with clear, readable JSX blocks.

---

📖 react-if-vz

- Ifz / If / ElseIf / Else – nested boolean logic
- When / WhenAll / WhenAny / WhenNot – single-line conditions
- Switch / Case / Default – discrete value matching
- Chain API – fluent Ifz.chain() syntax
- Hook API – useIfz() for logic-first rendering
- Debug logging & StrictMode-safe design
- Function children & shared args
- Optional wrapper / className / style per block

---

📦 Installation

``bash
npm install react-if-vz
`

---

🚀 Usage

$3

`tsx
import { Ifz, If, ElseIf, Else } from "react-if-vz";

Welcome Admin

`tsx

x > 10} args={[15]}>
{(x) =>

`tsx


A



B
C


`

---

$3

`tsx



Welcome back!

`tsx




Admin

`tsx

result === 1}>One
result === 2}>Two
Other

`

---

$3

`tsx
Ifz.chain({ trace: true })
.when(isAdmin, )
.when(isUser, )
.else();
`

---

$3

`tsx
const { when, else: otherwise } = useIfz([value]);

return when(v => v > 10, )
.when(v => v > 5, )
.else();
``

---

🧩 Props Summary

| Component | Key Props |
|--------|-----------|
| If / ElseIf | condition, children, args, className, style, wrapper, debug |
| Else | children |
| When | condition, children, args |
| Switch | value, children, args |
| Case | value, children, args, className, style, wrapper |
| Default | children, args, className, style |

---

✅ Advantages

- Declarative & readable JSX
- No ternary hell
- Works with StrictMode & SSR
- Optional debug tracing
- Tiny, dependency-free core

---

📄 License

MIT