o-show

Declaratively toggle the .style.display value of the element the directive is applied to.

Usage

<div>
    <span>Peek-a-</span>
    <span o-component="show-hide-randomly">
        <strong>Boo</strong>!
    </span>
</div>

<script>
    import { createApp, reactive, defineBindings } from '@boyojs/boyo-core';

    createApp()
        .component('show-hide-randomly', () => {
            const state = reactive({ show: false });

            setInterval(() => {
                state.show = !!Math.round(Math.random());
            }, 1000);

            defineBindings({
                'o-show'() {
                    return state.show;
                },
            });
        })
        .mount();
</script>