Hooks

'use client'

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

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

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

'use client'

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

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

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

'use client'

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

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

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

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

'use client'

import * as React from 'react'
import { createScrollState } from 'seitu/web'
import { useSubscription } from 'seitu/react'

export default function Page() {
  const ref = React.useRef<HTMLDivElement>(null)
  const state = useSubscription(() => createScrollState({ element: () => ref.current, direction: 'vertical' }))

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