https://github.com/ankurrsinghal/svelte-legos

A framework for Svelte Utilities 💡 Current status: 87 utilities.
https://github.com/ankurrsinghal/svelte-legos

svelte svelte-components svelte3 sveltejs sveltekit typescript

Last synced: 3 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ankurrsinghal/svelte-legos
• Owner: ankurrsinghal
• License: mit
• Created: 2023-02-21T20:59:32.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-11-16T02:10:04.000Z (about 2 months ago)
• Last Synced: 2024-12-31T20:36:27.551Z (11 days ago)
• Topics: svelte, svelte-components, svelte3, sveltejs, sveltekit, typescript
• Language: TypeScript
• Homepage: https://svelte-legos.surge.sh
• Size: 888 KB
• Stars: 813
• Watchers: 10
• Forks: 30
• Open Issues: 52
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-sveltekit - [code

README

        
# Svelte Legos

Collection of essential Svelte Composition Utilities







## 🚀 Features

- 🎪 [**Interactive docs & demos**](https://svelte-legos.surge.sh)

- ⚡ **Fully tree shakeable**: Only take what you want, [bundle size]

- 🦾 **Type Strong**: Written in [TypeScript](https://www.typescriptlang.org/), with [TS Docs](https://github.com/microsoft/tsdoc)

- 🔋 **SSR Friendly**

- 🌎 **No bundler required**: Usable via CDN

- 🔩 **Flexible**: Configurable event filters and targets

## 🦄 Usage

```svelte

import { counterStore } from "svelte-legos";

const { counter, inc, dec, set, reset } = counterStore();

 inc()}>Increment

{counter}

 dec()}>Decrement

```

```svelte

import { clickOutsideAction } from "svelte-legos";

let hidden = false;

function handleClickOutside() {

	hidden = !hidden;

}



```


Refer to [functions list](https://svelte-legos.surge.sh/guides) or [documentations](https://svelte-legos.surge.sh) for more details.

## 📦 Install

```bash

npm i svelte-legos

```

## Local setup

```bash

npm run start:dev

```

## 🌸 Thanks

This project is heavily inspired by the following awesome projects.

- [vueuse/vueuse](https://github.com/vueuse/vueuse)

- [streamich/react-use](https://github.com/streamich/react-use)

- [u3u/vue-hooks](https://github.com/u3u/vue-hooks)

- [logaretm/vue-use-web](https://github.com/logaretm/vue-use-web)

- [kripod/react-hooks](https://github.com/kripod/react-hooks)

## License

[MIT](LICENSE.md)