1.0.1 • Published 5 years ago
@mvps/make-middlewared-usestate v1.0.1
Make Middlewared useState
Create a version of useState with an indefinite number of middleware functions applied.
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!