Skip to main content
Jotai’s state resides in React, but sometimes it would be nice to interact with the world outside React. Zustand provides a store interface that can be used to hold some values and sync with atoms in Jotai. This only uses the vanilla api of zustand.

​
Install

You have to install zustand and jotai-zustand to use this feature. 
npm install zustand jotai-zustand

​
atomWithStore

atomWithStore creates a new atom with zustand store. It’s two-way binding and you can change the value from both ends. 
import { useAtom } from 'jotai'
import { atomWithStore } from 'jotai-zustand'
import create from 'zustand/vanilla'

const store = create(() => ({ count: 0 }))
const stateAtom = atomWithStore(store)
const Counter = () => {
  const [state, setState] = useAtom(stateAtom)

  return (
    <>
      count: {state.count}
      <button
        onClick={() => setState((prev) => ({ ...prev, count: prev.count + 1 }))}
      >
        button
      </button>
    </>
  )
}

Build docs developers (and LLMs) love

Get started for freeTalk to us