Make Middlewared useState

Create a version of useState with an indefinite number of middleware functions applied.

Live demo!

How to install

npm i @mvps/make-middlewared-usestate

How to use

A middleware function is any function that accepts and returns [state, dispatch]

// logger.js
export default ([state, setState]) => {
  const newSetState = state => {
    console.log(state)
    return setState(state)
  }
  return [state, newSetState]
}

After you've created some middleware functions, you can create your custom useState with an indefinite number of middlewares applied:

// useLoggedAndAPICallingState.js
import makeMiddlewaredUseState from '@mvps/make-middlewared-usestate'

import consoleLogger from '../middlewares/consoleLogger'
import eventLogger from '../middlewares/eventLogger'
import APICaller from '../middlewares/APICaller'

export default makeMiddlewaredUseState(consoleLogger, eventLogger, APICaller)

Then, in any component:

// App.js
import React from 'react'

import useState from './hooks/useLoggedAndAPICallingState'

const App = () => {
  const [count, setCount] = useState(0)
  const up = () => setCount(count + 1)
  const down = () => setCount(count - 1)

  return <div>
    <h1>{count}</h1>
    <button onClick={down}>-</button>
    <button onClick={up}>+</button>
  </div>
}

Want to see it in action? Check out the live demo!

Have fun!