Skip to content

Latest commit

 

History

History
56 lines (43 loc) · 1.12 KB

zustand.mdx

File metadata and controls

56 lines (43 loc) · 1.12 KB
title description nav
Zustand
This doc describes `jotai/zustand` bundle.
4.06

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 to access this bundle and its functions.

npm install zustand
# or
yarn add 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>
    </>
  )
}

Examples