Svelte Legos (Svelte 5)
Collection of essential Svelte Composition Utilities - Updated for Svelte 5
⚠️ This is a Svelte 5 fork of the original svelte-legos by @ankurrsinghal. The original repository is no longer being maintained, so I have created this fork to keep the library up-to-date with Svelte 5 and its new runes-based reactivity system.
🚀 Features
- 🎪 Interactive docs & demos
- ⚡ Fully tree shakeable: Only take what you want
- 🦾 Type Strong: Written in TypeScript, with TS Docs
- 🔋 SSR Friendly
- 🔩 Flexible: Configurable event filters and targets
- ✨ Svelte 5 Ready: Uses runes (
$state,$derived,$effect) and modern Svelte 5 patterns
🦄 Usage
<script lang="ts">
import { counterStore } from "@rajnandan1/svelte-legos";
const { counter, inc, dec, set, reset } = counterStore();
</script>
<button onclick={() => inc()}>Increment</button>
{counter}
<button onclick={() => dec()}>Decrement</button>
<script lang="ts">
import { clickOutsideAction } from "@rajnandan1/svelte-legos";
let hidden = $state(false);
function handleClickOutside() {
hidden = !hidden;
}
</script>
<div class="modal" use:clickOutsideAction onclickoutside={handleClickOutside}></div>
Refer to functions list or documentation for more details.
📦 Install
npm i @rajnandan1/svelte-legos
Local setup
npm install
npm run start:dev
🌸 Thanks
This project is a fork of svelte-legos by @ankurrsinghal.
The original project was heavily inspired by:
License
