Skip to content

ankurrsinghal/svelte-legos

Repository files navigation

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-legos

Local setup

npm run start:dev

๐ŸŒธ Thanks

This project is heavily inspired by the following awesome projects.

License

MIT