Conditional regions

Create and dispose a reactive branch when its condition changes.

01 / Live preview● Interactive

Interact with the component. The source on the right is the actual code.

conditional.tsx

● Zidom

import { signal } from '@zidomjs/core';export default function ConditionalDemo() {  const connected = signal(false);  return (    <div className="example-card">      <button onClick={() => (connected.value = !connected.value)}>        Toggle connection      </button>      <div className="demo-output">        {() =>          connected.value ? (            <p role="status">Connected. This branch is mounted.</p>          ) : (            <p role="status">Disconnected. The previous branch was disposed.</p>          )}      </div>    </div>  );}

● zidom / conditionalTSX · UTF-8 · Copyable source

This website demo runs pinned Zidom beta.1 packages; the latest framework release is beta.2. See release details and limitations. Report a problem with this example.