react-use-state-group
Introduction
This package introduces a custom hook useStateGroup
, which helps you define states in your functional components quickly.
Install
npm i react-use-state-group
yarn add react-use-state-group
Usage
The following code using useStateGroup
:
;; { const userState userStateSetters = ; // Define all your needed states with an object // Use `userStateSetters.<attribute-name>(<new-value>)` return <form> <input type="text" value=userStateage onChange= userStateSetters/> <input type="text" value=userStatename onChange= userStateSettersnameetargetvalue/> <input type="text" value=userStateposition onChange= userStateSetters/> </form> } ;
does the same effect as
;; { const name setName = ; const age setAge = ; const position setPosition = ; return <form> <input type="text" value=age onChange= /> <input type="text" value=name onChange= /> <input type="text" value=position onChange= /> </form> } ;
However, with original useState
, we need to define pairs of [attribute, setAttribute]
, which is considered to be boilerplate.
Now with useStateGroup
, we replace each setAttribute
with a function defined automatically for each attribute setters.attribute
. This does not only saves many efforts defining those useState
pairs, but also provides syntactic hints if user wants refactor the name of some attributes.
Works with TypeScript
This package is written in typescript, so if you stick to clear typing, this package will work with you well.