valtio-hook-useautoproxy

A React hook for automatically proxying Valtio state.

Installation

npm i valtio-hook-useautoproxy

pnpm i valtio-hook-useautoproxy

yarn i valtio-hook-useautoproxy

bun i valtio-hook-useautoproxy

Usage

App.tsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { proxy } from 'valtio';
import { useAutoProxy } from 'valtio-hook-useautoproxy';
import { proxyState } from './proxy/proxyState';


function App() {
  
  
  const { count, inc } = useAutoProxy(proxyState);

  return (
    <>
      <div>
        {count}
        <button onClick={() => inc()}>Increase</button>
      </div>
    </>
  )
}

export default App;

DO NOT USE THE PROXY INSIDE OF ELEMENT WITH THE HOOK ❌

proxy/proxyState.ts

import { proxy } from "valtio";

interface IState {
    count: number;
    inc: () => void;
};

export const proxyState = proxy<IState>({
  count: 1,
  inc: () => ++proxyState.count
});

API

useAutoProxy<T>(proxyState: T): Snapshot<T>

• proxyState: A Valtio proxy object
• Returns a snapshot of the proxy state with methods bound to the original proxy

License

MIT