useMethods

Category

State

Export Size

202 B

Last Changed

5 days ago

useReducer sugar — turn an object of pure state transitions into a state value plus one callable method per transition.

Demo

Usage

import { useMethods } from '@reause/shared'

interface Counter {
  count: number
}

const initialState: Counter = { count: 0 }

function createMethods(state: Counter) {
  return {
    reset: () => initialState,
    increment: () => ({ count: state.count + 1 }),
    decrement: () => ({ count: state.count - 1 }),
  }
}

function Counter() {
  const [state, { increment, decrement, reset }] = useMethods(createMethods, initialState)

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{state.count}</span>
      <button onClick={increment}>+</button>
      <button onClick={reset}>reset</button>
    </div>
  )
}

Type Declarations

type CreateMethods<M, T> = (state: T) => {
    [P in keyof M]: (payload?: any) => T;
}

type WrappedMethods<M> = {
    [P in keyof M]: (...payload: any) => void;
}

export function useMethods<M, T>(createMethods: CreateMethods<M, T>, initialState: T): [
    T,
    WrappedMethods<M>
]

Source

Source · Demo · react-use

Contributors

Changelog

v0.1.7 on

3cb31 - feat(shared): add useMethods (#929)