Zustand-valtio NPM

zustand-valtio

A sweet combination of Zustand and Valtio

Install

npm install zustand zustand-valtio valtio

Usage

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 (
    <>
      <div>Count: {count}</div>
      <button type="button" onClick={inc}>
        +1
      </button>
    </>
  );
};