Skip to content

A framework for Svelte Utilities 💡 Current status: 87 utilities.

License

Notifications You must be signed in to change notification settings

IsraPerez98/svelte-legos

 
 

Repository files navigation

sveltelegos-blue

A fork of ankurrsinghal/svelte-legos, hopefully with more consistent releases and maintenance.

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 "@sveltelegos-blue/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 "@sveltelegos-blue/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 @sveltelegos-blue/svelte-legos

Local setup

npm run start:dev

🌸 Thanks

This project is heavily inspired by the following awesome projects.

License

MIT

About

A framework for Svelte Utilities 💡 Current status: 87 utilities.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 58.6%
  • Svelte 36.6%
  • JavaScript 4.2%
  • Other 0.6%