# Show

Source: https://signy.dev/documentation/1/templates/show/

Render one branch or the other.

`Show` takes an accessor in `when`. While it is truthy, the children render, otherwise the fallback.

```js
const { Component, Signal, application, html, Show } = Signy;

class Session extends Component {
  user = new Signal(null);

  render() {
    return html`
      ${Show({
        when: () => this.user.value,
        fallback: html`
          <button onClick=${() => (this.user.value = { name: "Ada" })}>Sign in</button>
        `,
        children: (user) => html`
          <p>Hi ${user.name}</p>
          <button class="secondary" onClick=${() => (this.user.value = null)}>Sign out</button>
        `,
      })}
    `;
  }
}

application(Session).mount("#show-login");
```

## Children as a function

A function in `children` receives the truthy value. It runs once per branch, untracked: the branch is built again only when the truthy value changes, such as another object or falsy to truthy. Bind signals read inside it with `${() => ...}` as usual.

## As a tag

```js
html`
  <${Show} when=${() => this.open.value}>
    <p>Now you see me</p>
  </${Show}>
`
```

A node child is moved in and out, not rebuilt, so it keeps its listeners and bindings.