Hooks

'use client'

import { sessionStorageValue } from 'seitu/web'
import { useSubscription } from 'seitu/react'
import * as z from 'zod'

export default function Page() {
  const value = useSubscription(sessionStorageValue({
    key: 'test',
    defaultValue: 0,
    schema: z.number(),
  }))

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

'use client'

import { sessionStorageValue } from 'seitu/web'
import { useSubscription } from 'seitu/react'
import * as z from 'zod'

const sessionStorage = sessionStorageValue({
  key: 'test',
  defaultValue: 0,
  schema: z.number(),
})

export default function Page() {
  const value = useSubscription(sessionStorage)

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

'use client'

import { createSessionStorage, sessionStorageValue } from 'seitu/web'
import { useSubscription } from 'seitu/react'
import * as z from 'zod'

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

// Usage with selector, re-renders only when count changes
export default function Page() {
  const count = useSubscription(sessionStorage, value => value.count)

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