svelte-toggleable

A toggleable store for Svelte

Usage no npm install needed!

<script type="module">
  import svelteToggleable from 'https://cdn.skypack.dev/svelte-toggleable';
</script>

README

Svelte Toggleable

Implements a toggleable store with convenience functions.

Installation

npm add svelte-toggleable

Basic usage

This store like object is meant to be a shorthand for typical calls like

<!-- Classic -->
<button on:click="{() => $show = true}">Show</button>
<button on:click="{() => $show = false}">Hide</button>
<button on:click="{() => $show = !$show}">Toggle</button>

<!-- With toggleable -->
<button on:click="{show.on}">Show</button>
<button on:click="{show.off}">Hide</button>
<button on:click="{show.toggle}">Toggle</button>

Default value

The default value of a toggleable store is set true, another value can be passed on initialization.

Methods

  • on Sets the value to 'true'
  • off Sets the value to 'false'
  • toggle Flips the value between 'true' and 'false'