useToggle#

A boolean signal paired with a toggler. Call the toggler with no argument to flip the value, or with a boolean to set it explicitly; it returns the new value. Cross-platform — import from @sigx/use.

TSX

import { component, render } from 'sigx';
import { useToggle } from '@sigx/use';

const Switch = component(() => {
    const [dark, toggleDark] = useToggle(false);

    return () => (
        <div class="flex items-center gap-3">
            <button class="btn" onClick={() => toggleDark()}>
                {dark ? '🌙 Dark' : '☀️ Light'}
            </button>
            <button class="btn btn-ghost" onClick={() => toggleDark(false)}>force light</button>
        </div>
    );
});

render(<Switch />, "#app");

Usage#

TypeScript

import { useToggle } from '@sigx/use';

const [open, toggleOpen] = useToggle();      // starts false
toggleOpen();        // true  — flips
toggleOpen(false);   // false — explicit set
open.value;          // read the signal directly

Pass an existing boolean signal to get just a toggler bound to it — useful when the signal already lives somewhere (a store, a prop):

TypeScript

import { signal } from 'sigx';

const visible = signal(false);
const toggleVisible = useToggle(visible);
toggleVisible(); // visible.value === true

Signatures#

TypeScript

function useToggle(initial?: boolean): [PrimitiveSignal<boolean>, Toggler];
function useToggle(source: PrimitiveSignal<boolean>): Toggler;

type Toggler = (value?: boolean) => boolean;

Call	Returns
`useToggle(initial?)`	`[signal, toggler]` — a new boolean signal (default `false`) and its toggler.
`useToggle(existingSignal)`	`toggler` — a toggler bound to the signal you passed.

Platform: everywhere. No cleanup needed.

useToggle#

Usage#

Signatures#

See also#