Svelte Subscribe

humanspeak

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

Visit the REPL for an example.

<script>
    import { writable } from 'svelte/store'
    import { Subscribe } from '@humanspeak/svelte-subscribe'

    const users = [{ friend: writable('John') }]
</script>

{#each users as { friend }}
    {$friend}
    <!-- ⛔ Stores must be declared at the top level of the component -->
    <Subscribe {friend} let:friend>
        {friend}
    </Subscribe>
{/each}

Installation

$ npm i -D svelte-subscribe

Usage

Subscribe receives multiple stores as props and exposes multiple slot props that are subscribed to each prop with the same name.

<Subscribe a={writable(123)} let:a b={readable('abc')} let:b>
    {a}
    {b}
    <!-- 123 abc -->
</Subscribe>

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

Top categories