Conditionals

1linkimport { Conditional } from 'callbag-jsx';

2link

3linkconst show = state(true);

4link

5linkrenderer.render(<>

6link  <input type='checkbox' _state={show}/> Show stuff

7link  <Conditional if={show}

8link    then={() => <div>🦄🪕Stuff Are Shown ... 🪕🦄</div>}

9link    else={() => <div>Not showing stuff</div>}

10link  />

11link</>).on(document.body);

1linkconst timer = interval(1000);

2link

3linkrenderer.render(

4link  <Conditional if={expr($ => $(timer, 0) % 2)}

5link    then={() => <div>✋ Hellow!</div>}

6link  />

7link).on(document.body);

info provided then() and else() functions will be called everytime the value of the conditional changes, and the whole DOM tree will be replaced with their return result. For simply showing/hiding some content, hidden attribute might be a better option depending on the situation.