zustand-valtio


A sweet combination of Zustand and Valtio

Install

``bash
npm install zustand zustand-valtio valtio
`

Usage

`jsx
import { create } from 'zustand';
import { withProxy } from 'zustand-valtio';

const useCounterState = create(
withProxy({
count: 0,
inc() {
this.count++;
},
}),
);

const Counter = () => {
const count = useCounterState((state) => state.count);
const inc = useCounterState((state) => state.inc);
// Or this works too
// const inc = () => ++useCounterState.getProxyState().count;
return (
<>




+1


);
};
`

But, why?

Zustand has immer middleware to update state mutably.
Valtio has the same capability. Isn't the combination is sweet?

Examples

The examples folder contains working examples.
You can run one of them with

`bash
PORT=8080 pnpm run examples:01_counter
``

and open in your web browser.

You can also try them directly:
01
02
03
04

Tweets

- https://twitter.com/dai_shi/status/1772063521771270343
- https://twitter.com/dai_shi/status/1772464889635684619
- https://x.com/dai_shi/status/1811982890202464399