https://github.com/humanspeak/svelte-subscribe

https://github.com/humanspeak/svelte-subscribe

Last synced: 27 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/humanspeak/svelte-subscribe
• Owner: humanspeak
• License: mit
• Created: 2024-11-10T21:23:17.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2025-04-15T00:23:25.000Z (about 1 month ago)
• Last Synced: 2025-04-16T08:47:07.886Z (about 1 month ago)
• Language: TypeScript
• Homepage:
• Size: 729 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# svelte-subscribe

[![npm version](http://img.shields.io/npm/v/@humanspeak/svelte-subscribe.svg)](https://www.npmjs.com/package/svelte-subscribe)

[![npm downloads](https://img.shields.io/npm/dm/@humanspeak/svelte-subscribe.svg)](https://www.npmjs.com/package/svelte-subscribe)

![license](https://img.shields.io/npm/l/svelte-subscribe)

![build](https://img.shields.io/github/actions/workflow/status/humanspeak/svelte-subscribe/publish.yml)

[![coverage](https://coveralls.io/repos/github/humanspeak/svelte-subscribe/badge.svg?branch=main)](https://coveralls.io/github/humanspeak/svelte-subscribe?branch=main)

[![size](https://img.shields.io/bundlephobia/min/@humanspeak/svelte-subscribe)](https://bundlephobia.com/result?p=@humanspeak/svelte-subscribe)

Subscribe to non top-level stores in your Svelte templates.

Visit the [REPL](https://svelte.dev/repl/d1bb4f2249f54790934066edf63cb5cc?version=3.48.0) for an example.

```svelte

    import { writable } from 'svelte/store'

    import { Subscribe } from '@humanspeak/svelte-subscribe'

    const users = [{ friend: writable('John') }]

{#each users as { friend }}

    {$friend}

    

    

        {friend}

    

{/each}

```

## Installation

```bash

$ npm i -D svelte-subscribe

```

## Usage

`Subscribe` receives multiple stores as props and exposes multiple [slot props](https://svelte.dev/tutorial/slot-props) that are subscribed to each prop with the same name.

```svelte

    {a}

    {b}

    

```

All slot props are strongly typed for a pleasant TypeScript experience.