Playground

Click the open in Codesandbox button to open the playground in a new tab.

For reasons unknown to me you will have to press save in Codesandbox the playground to get type checking.

import { 
  MutableSelectable, 
  Selectable, 
  strictEqual,
  shallowEqualArray,
  shallowEqual,
  deepEqual,
} from "@selkt/core"
import { useSelectable } from "@selkt/react"
import React from 'react'
import ReactDOM from 'react-dom/client'

console.clear()

const store = new Selectable({
  username: ''
})

store.select(
  state => state.username, 
  username => {
    console.log(username)
  }
)

export default function App  ()  {
  const username = useSelectable(store, state => state.username)
  return (
    <input 
      value={username} 
      onChange={
        event => {
          let value = event.target.value
          store.set(state => {
            state.username = value
          })
        }
      }
    />
  )
}

Open Sandbox

Selectable Interface