v0.17.171 - 37.9 / 22.4

<Show .../>

Renders its children based on a condition. For the condition to be reactive it needs to be function. The callback will receive a signal for in case it keeps being truthy you can update accordly.

# Attributes

nametypedescription
whenanyonce when becomes truthy, it will show its children
fallback?anya thing to render as fallback when the condition is falsy

# Snippet

# Static true/false

Test using static values

# Reactive Value

Test using a signal and also the signal value

The signal thats being called wont be reactive because instead of passing to when a function we are passing the signal value which is a boolean

# Rendering

How many times a children renders by a toggling signal

Children are unmounted and effectively disposed

# Avoiding Re-rendering

Using the children helper we can avoid re rendering

We use the children helper to memo the result of a component

# Fallback

A fallback renders a component when the condition becomes false

Fallbacks use memo which are lazy, so these dont need to use the children helper

# Fallback Signal

Tests a signal for a fallback.

# Callback

Using the value from the condition in a callback

Show callbacks receive a read-only signal, a memo

# Callbacks

Children are arrays, so the callbacks could be anywhere

The third callback needs to return a function for it to be reactive

# Callbacks Null

Test what happens when a value for a callback becomes null

# Show In Between

In between 2 elements and in between 2 text nodes

Sandwich, it keeps the position