Zustand Tools

Tools for simpler zustand usage with react.

Installation

npm i zustand-tools

createSimple(initStore, middlewares)

Creates a simple store with correct typings and hooks for easier usage.

import { createSimple } from 'zustand-tools'

const demoStore = createSimple({ foo: 'bar' })
/*
 * will provide:
 * demoStore.useStore.getState().foo
 * demoStore.useStore.getState().setFoo(value)
 * demoStore.hooks.useFoo() => [value, setter] // like useState
 */

const useFoo = demoStore.hooks.useFoo

function App() {
  const [foo, setFoo] = useFoo()

  useEffect(() => {
    setFoo('newBar')
  }, [setFoo])

  return <div>{foo}</div>
}

createSimpleContext(initStore, middlewares)

Basically the same as createSimple but return a provider to use the store only for a specific context.

initialValues can be used to override the defaultValues provided on creation. It will be merged with defaultValues.

import { createSimpleContext } from 'zustand-tools'

const demoStore = createSimpleContext({ foo: 'bar' })

const DemoStoreProvider = demoStore.Provider
const useFoo = demoStore.hooks.useFoo

function Child() {
  const [foo, setFoo] = useFoo()

  useEffect(() => {
    setFoo('newBar')
  }, [setFoo])
  
  return <div>{foo}</div>
}

function App() {
  return (
    <Provider initialValues={{ foo: 'customBar' }}>
      <Child />
    </Provider>
  )
}

Special Hook: useAllData()

This special hook will return all data from the store using a shallow compare.

import { createSimple } from 'zustand-tools'

const demoStore = createSimple({ foo: 1, bar: 2 })
// demoStore.hooks.useAllData() -> { foo: 1, bar: 2 }

Adding Additional Actions

If needed you can add additional actions to the generated store.

import { createSimple } from 'zustand-tools'

const { useStore } = createSimple(
  { foo: 1 },
  {
    actions: (set) => ({
      increaseFoo: (amount: number) => set((state) => ({ foo: state.foo + amount }))
    })
  }
)

useStore.getState().increaseFoo(5)

Adding Middlewares

Middlewares can be added by passing an array as middlewares in the second parameter.

import { createSimple } from 'zustand-tools'
import { devtools } from 'zustand/middleware'

const demoStore = createSimple({ foo: 'bar' }, { middlewares: [(initializer) => devtools(initializer, { enabled: true })] })