Conditional Rendering

Conditional rendering displays different UI based on conditions. Hydroxide uses special attributes directly on elements.

The `if` Attribute

Add if to any element to conditionally render it. When the condition is false, the element is removed from the DOM entirely—not just hidden.

import { reactive } from 'hydroxide';

function App() {
  const show = reactive(true);

  function toggle() {
    show.do(v => !v);
  }

  return (
    <div class="container">
      <button class="primary-button" on-click={toggle}>
        {show() ? 'Hide' : 'Show'} Message
      </button>
      <p if={show()} class="message">
        Hello!
      </p>
    </div>
  );
}

export default App;

`else-if` and `else`

Chain conditions with else-if and else. Elements must be siblings for the chain to work:

<p if={count() % 15 === 0}>FizzBuzz</p>
<p else-if={count() % 3 === 0}>Fizz</p>
<p else-if={count() % 5 === 0}>Buzz</p>
<p else>{count()}</p>

import { reactive } from "hydroxide";

function FizzBuzz() {
  const count = reactive(0);

  return (
    <div class="container">
      <input
        type="range"
        min="0"
        max="100"
        bind-value={count}
      />
      <h1>{count()}</h1>
      <p if={count() % 15 === 0} class="result fizzbuzz">FizzBuzz</p>
      <p else-if={count() % 3 === 0} class="result fizz">Fizz</p>
      <p else-if={count() % 5 === 0} class="result buzz">Buzz</p>
      <p else class="result">{count()}</p>
    </div>
  );
}

export default FizzBuzz;

Ternary Expressions

Ternary can only be used for simple values like text, booleans, numbers etc - It can not be used for elements or components.

<button data-active={isOpen() ? 'true' : 'false'}>{isOpen() ? 'Foo' : 'Bar'}</button>

Conditional Rendering

The if Attribute

else-if and else

Ternary Expressions

On this page

The `if` Attribute

`else-if` and `else`