Svelte Legos
Collection of essential Svelte Composition Utilities
π Features
- πͺ Interactive docs & demos
β‘ Fully tree shakeable: Only take what you want, [bundle size]π¦Ύ Type Strong: Written in TypeScript, with TS Docsπ SSR Friendlyπ No bundler required: Usable via CDN- π© Flexible: Configurable event filters and targets
π¦ Usage
<script lang="ts">
import { counterStore } from "svelte-legos";
const { counter, inc, dec, set, reset } = counterStore();
</script>
<button on:click={() => inc()}>Increment</button>
{counter}
<button on:click={() => dec()}>Decrement</button><script lang="ts">
import { clickOutsideAction } from "svelte-legos";
let hidden = false;
function handleClickOutside() {
hidden = !hidden;
}
</script>
<div class="modal" use:clickOutsideAction on:clickoutside={handleClickOutside} />Refer to functions list or documentations for more details.
π¦ Install
npm i svelte-legosLocal setup
npm run start:devπΈ Thanks
This project is heavily inspired by the following awesome projects.