Declarative conditional rendering for React (Ifz, When, Switch/Case) with nested logic, dynamic children, and styling.
npm install 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.
---
- 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
---
``bash`
npm install react-if-vz
---
`tsx
import { Ifz, If, ElseIf, Else } from "react-if-vz";
Welcome Admin
Welcome User
Welcome Guest
`
---
`tsx
{(x) => {x} is large}
{(args) => Fallback: {args[0]}}
`
---
`tsx
A
`
---
` Welcome back!tsx
Admin panel
Dashboard
Members only
`
---
` Admintsx
User
Guest
`
`tsx`
---
`tsx`
Ifz.chain({ trace: true })
.when(isAdmin,
.when(isUser,
.else(
---
`tsx
const { when, else: otherwise } = useIfz([value]);
return when(v => v > 10, )
.when(v => v > 5,
.else();
``
---
| 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 |
---
- Declarative & readable JSX
- No ternary hell
- Works with StrictMode & SSR
- Optional debug tracing
- Tiny, dependency-free core
---
MIT