Root API (exported from ./)

import { create, ref, devtools } from '@shined/reactive'

create

A method for React that create a vanilla store with extra React Hook useSnapshot. See create#returns in vanilla exports for other properties.

const store = create({ count: 1 })

// in React component
const count = store.useSnapshot(s => s.count)
const count = store.useSnapshot(s => s.count, { sync:true })
const { count } = store.useSnapshot()
const { count } = store.useSnapshot({ sync:true })

Type Definitions

/**
 * example state for `store.useSnapshot()`
 * {
 *   name: 'Bob',
 *   age: 20,
 *   hobbies: ['coding', 'biking'],
 * }
 */

export interface SnapshotOptions<StateSlice> {
  sync?: boolean
  isEqual?: (a: StateSlice, b: StateSlice) => boolean
}

export type Selector<State, StateSlice> = (state: State) => StateSlice

export type StoreUseSnapshot<State> = {
  // const state = store.useSnapshot()
  (): State

  // const state = store.useSnapshot({ sync: true })
  (options: SnapshotOptions<State>): State

  // const name = store.useSnapshot((s) => s.name)
  <StateSlice>(selector: Selector<State, StateSlice>): StateSlice

  // const state = store.useSnapshot(undefined, { sync: true })
  <StateSlice>(selector: undefined, options: SnapshotOptions<StateSlice>): State

  // const age = store.useSnapshot((s) => s.age, { sync: true })
  <StateSlice>(
    selector: Selector<State, StateSlice>,
    options: SnapshotOptions<StateSlice>
  ): StateSlice
}

ref

Exported directly from ./vanilla, see ref in vanilla exports for more.

const store = create({ 
  count: 1,
  ref: ref({ tableEl: null as null | HTMLTableElement })
})

store.mutate.ref.tableEl = document.getElementById("#table")

// in React component
const tableEl = store.useSnapshot(s => s.ref.tableEl)

devtools

Exported directly from ./vanilla, see devtools in vanilla exports for more.

const store = create({ username: '', password: '' })

devtools(store, { name: 'LoginStore', enable: true })