Valtio

Jotai's state resides in React, but sometimes it would be nice to interact with the world outside React.

Valtio provides a proxy interface that can be used to store some values and sync with atoms in Jotai.

This only uses the vanilla api of valtio.

Install

You have to install valtio and jotai-valtio to use this feature.

npm install valtio jotai-valtio
# or
yarn add valtio jotai-valtio

atomWithProxy

atomWithProxy creates a new atom with valtio proxy. It's two-way binding and you can change the value from both ends.

import { useAtom } from 'jotai'
import { atomWithProxy } from 'jotai-valtio'
import { proxy } from 'valtio/vanilla'

const proxyState = proxy({ count: 0 })
const stateAtom = atomWithProxy(proxyState)
const Counter = () => {
  const [state, setState] = useAtom(stateAtom)

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

Parameters

atomWithProxy(proxyObject, options?)

proxyObject (required): the Valtio proxy object you want to derive the atom from

options.sync (optional): makes the atom update synchronously instead of waiting for batched updates, similar to valtio/useSnapshot. This will result in more renders, but have more guarantees that it syncs with other Jotai atoms.

atomWithProxy(proxyObject, { sync: true })

Examples