Package Exports

use-state-proxy

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-state-proxy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

use-state-proxy

Using Proxy API to auto dispatch React.useState()

Installation

## using npm
npm install use-state-proxy

## or using yarn
yarn add use-state-proxy

## or using pnpm
pnpm install use-state-proxy

Typescript Signature

type StateProxy<T extends object> = T;

export function useStateProxy<T extends object>(initialValues: T): StateProxy<T>;

Examples

With use-state-proxy

You can get/set the values directly. The set state action is auto dispatched if the value is changed, which auto trigger re-rendering when needed.

import React from 'react';
import { useStateProxy } from 'use-state-proxy';

function App() {
  let state = useStateProxy({ a: 2, b: 3, sum: 5 })
  state.sum = state.a + state.b // will not cause deadloop if the new values === existing value
  return <div>
    <Num name='a' state={state}/>
    <Num name='b' state={state}/>
    <Num name='sum' state={state}/>
  </div>
}

function Num({ state, name }) {
  return <div>
    <b>{name}</b>
    <br/>
    <button onClick={()=>state[name]--}>Dec</button>
    {state[name]}
    <button onClick={()=>state[name]++}>Dec</button>
  </div>
}

Without use-state-proxy

You need to explicitly call the setHook to dispatch update action to trigger re-rendering.

import React from 'react';

function App() {
  let [a, setA] = React.useState(2)
  let [b, setB] = React.useState(3)
  let [sum, setSum] = React.useState(a + b)
  React.useEffect(() => setSum(a + b), [a, b])
  return <div>
    <Num name='a' state={a} setState={setA}/>
    <Num name='b' state={b} setState={setB}/>
    <Num name='sum' state={sum} setState={setB}/>
  </div>
}

function Num({ name, state, setState }) {
  return <div>
    <b>{name}</b>
    <br/>
    <button onClick={()=>setState(state - 1)}>Dec</button>
    {state}
    <button onClick={()=>setState(state + 1)}>Inc</button>
  </div>
}

License

BSD-2-Clause (Free Open Source Software)