Seitu - Type-Safe Utilities

useSubscription()

Use this primitive to subscribe to a reactive value. Accepts a subscription object directly, or an accessor/getter that returns one. The getter is reactive — when it reads a signal, the subscription is recreated and re-subscribed automatically.

Returns a Solid Accessor<R>: call it (value()) to read the current value inside JSX or another reactive scope.

Examples

Inline subscription

import { createWebStorageValue } from 'seitu/web'
import { useSubscription } from 'seitu/solid'
import * as z from 'zod'

function Counter() {
  const value = useSubscription(() => createWebStorageValue({
    type: 'sessionStorage',
    key: 'test',
    defaultValue: 0,
    schema: z.number(),
  }))

  return <div>{value()}</div>
}

Instance outside of component

import { createWebStorage } from 'seitu/web'
import { useSubscription } from 'seitu/solid'
import * as z from 'zod'

const sessionStorage = createWebStorage({
  type: 'sessionStorage',
  schemas: { count: z.number(), name: z.string() },
  defaultValues: { count: 0, name: '' },
})

function Counter() {
  const value = useSubscription(sessionStorage)
  return <div>{value().count}</div>
}

Subscription with selector

import { createWebStorage } from 'seitu/web'
import { useSubscription } from 'seitu/solid'
import * as z from 'zod'

const sessionStorage = createWebStorage({
  type: 'sessionStorage',
  schemas: {
    count: z.number(),
    name: z.string(),
  },
  defaultValues: { count: 0, name: '' },
})

function Counter() {
  // Usage with selector, the accessor only updates when count changes
  const count = useSubscription(sessionStorage, { selector: value => value.count })

  return <div>{count()}</div>
}

Reactive source (re-subscribes when a signal changes)

import { createSignal } from 'solid-js'
import { createWebStorageValue } from 'seitu/web'
import { useSubscription } from 'seitu/solid'
import * as z from 'zod'

function User() {
  const [userId, setUserId] = createSignal('user-1')
  const data = useSubscription(() => createWebStorageValue({
    type: 'localStorage',
    key: `user:${userId()}`,
    schema: z.object({ name: z.string() }),
    defaultValue: { name: '' },
  }))

  return <div>{data().name}</div>
}

Ref example

import { createScrollState } from 'seitu/web'
import { useSubscription } from 'seitu/solid'

function Page() {
  let ref: HTMLDivElement | undefined
  const state = useSubscription(() => createScrollState({ element: () => ref, direction: 'vertical' }))

  return (
    <div ref={ref}>
      {String(state().top.reached)}
    </div>
  )
}

Hooks