@marianmeres/switch-store

Tiny DRY store utility for a boolean flag along with optional data.

Install

$ npm i @marianmeres/switch-store

Basic example

const sidebar = createSwitchStore(false, { component: Foo } /* whatever */);

// "open" and "close" are aliases to "on" and "off"

sidebar.subscribe((value) => {
	// value -> {
	//     isOn: false,
	//     isOff: true,
	//     isOpen: false,
	//     isClosed: true,
	//     data: { component: Foo }
	// }
});

// api
store.subscribe((value) => ...)
store.on(data?); // or open
store.off(data?); // or close
store.toggle();

Using Svelte here just as an example of consuming the store. The store itself is not dependant on Svelte (just compatible).

{#if $sidebar.isOpen}
    <Sidebar>
        <svelte:component this={$sidebar.data.component} />
    </Sidebar>
{/if}

<button on:click={sidebar.toggle}>Toggle Foo sidebar</button>

<button on:click={() => sidebar.open({ component: Bar })}>
    Bar sidebar
</button>