Introduction

Why?

When using many different libraries for working with utils, I kept running into the same issues:

• No tests
• No way to use the value outside of components
• Poor or missing typing

So I created a library based on shadcn/cli and called it Hookas. But it was React-only and still had the same problem: you couldn't use the data outside of components.

Solution

That's why I built Seitu (word "utils" reversed, with the letter L replaced by E). It's a type-safe, framework-agnostic library for working with familiar hooks. I brought together my experience with TypeScript and different frameworks, so you can use Seitu with React or without any framework at all.

Examples

Local Storage / Session Storage

One of the painful spots for me was localStorage. I wanted typed storage that I could also use reactively.

With Seitu you get a reactive, typed value that works both inside and outside components:

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

const count = createWebStorageValue({
  type: 'localStorage',
  key: 'count',
  defaultValue: 0,
  schema: z.number(),
})

count.get() // 0
count.set(1)
count.set(v => v + 1)
count.subscribe(v => console.log(v))

In React, subscribe with useSubscription:

'use client'

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

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

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

Ready?

Head to Local Storage or React hooks to get started.