Seitu
Solid

Components

Subscribes to a value and passes an accessor to children (runs once; call value() in JSX).

Subscription()

Subscribes to a value and passes an accessor to children (runs once; call value() in JSX). Prefer over the primitive when you want a component API.

Examples

Basic usage

import { createWebStorage } from 'seitu/web'
import { Subscription } 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 Page() {
  return (
    <Subscription value={sessionStorage}>
      {value => <div>{value().count}</div>}
    </Subscription>
  )
}

With selector

import { createWebStorage } from 'seitu/web'
import { Subscription } 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 Page() {
  return (
    <Subscription value={sessionStorage} selector={v => v.count}>
      {count => <div>{count()}</div>}
    </Subscription>
  )
}

Edit on GitHub

Last updated on

On this page