Swap
Picks one of two renderables from a boolean.
API
Props
Swap.Boolean renders components[0] when swapOn is false and components[1] when it is true.
| prop | type | default | |
|---|---|---|---|
components? | Renderable[] | [] | the two branches, in [false, true] order |
swapOn? | boolean | false | which branch to render |
Examples
Usage
The array order is the whole API: false first, true second, the same order in which a boolean is usually spelled out. It is deliberately positional rather than named — a component that swaps an icon does not gain anything from two extra prop names, and the call site stays one line.
<Swap.Boolean swapOn={isDark} components={[SunIcon, MoonIcon]} />
<Swap.Boolean swapOn={isPlaying} components={[<PlayIcon size={16} />, <PauseIcon size={16} />]} />Details
A missing branch renders nothing
Nothing forces the array to hold two entries. An index that does not exist resolves to undefined, which renders as nothing, so a one-element array is a legitimate way to say "show this only while the flag is false". It is also how a typo degrades: silently, into an empty slot rather than a crash.
<Swap.Boolean swapOn={isDark} components={[SunIcon]} />When to reach for Switch instead
Swap stops making sense the moment the reader has to count array positions to know what renders — three branches, or two branches whose conditions are not each other's opposite. That is what Switch is for: it trades the compact call site for conditions that read as labels.