svelte-subscribe

svelte-subscribe

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 '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.