Svelte
Hooks
Subscribe to a reactive value from a Svelte component.
useSubscription()
Subscribe to a reactive value from a Svelte component. Pass a handle or a
factory (run once). Returns a Svelte Readable ($value); it attaches on
first subscriber and detaches on last.
Examples
Inline subscription
<script lang="ts">
import { createWebStorageValue } from 'seitu/web'
import { useSubscription } from 'seitu/svelte'
import * as z from 'zod'
const value = useSubscription(() => createWebStorageValue({
type: 'sessionStorage',
key: 'test',
defaultValue: 0,
schema: z.number(),
}))
</script>
<div>{$value}</div>Instance outside of component
<script lang="ts">
import { createWebStorage } from 'seitu/web'
import { useSubscription } from 'seitu/svelte'
import * as z from 'zod'
const sessionStorage = createWebStorage({
type: 'sessionStorage',
schemas: { count: z.number(), name: z.string() },
defaultValues: { count: 0, name: '' },
})
const value = useSubscription(sessionStorage)
</script>
<div>{$value.count}</div>With selector
<script lang="ts">
import { createWebStorage } from 'seitu/web'
import { useSubscription } from 'seitu/svelte'
import * as z from 'zod'
const sessionStorage = createWebStorage({
type: 'sessionStorage',
schemas: { count: z.number(), name: z.string() },
defaultValues: { count: 0, name: '' },
})
// Updates only when `count` changes
const count = useSubscription(sessionStorage, { selector: v => v.count })
</script>
<div>{$count}</div>Edit on GitHub
Last updated on