1.0.2 • Published 4 years ago
react-use-state-group v1.0.2
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
:
import React from 'react';
import {useStateGroup} from "react-use-state-group";
function UserStatus() {
const [userState, userStateSetters] = useStateGroup({
name: "Winnie",
age: 67,
position: "Driver",
});
// Define all your needed states with an object
// Use `userStateSetters.<attribute-name>(<new-value>)`
return (
<form>
<input type="text" value={userState.age} onChange={e => userStateSetters.age(e.target.value)}/>
<input type="text" value={userState.name} onChange={e => userStateSetters.name(e.target.value)}/>
<input type="text" value={userState.position} onChange={e => userStateSetters.position(e.target.value)}/>
</form>
)
}
export default UserStatus;
does the same effect as
import React from 'react';
import {useState} from 'react';
function UserStatus() {
const [name, setName] = useState("Winnie");
const [age, setAge] = useState(67);
const [position, setPosition] = useState("Driver");
return (
<form>
<input type="text" value={age} onChange={e => setAge(e.target.value)}/>
<input type="text" value={name} onChange={e => setName(e.target.value)}/>
<input type="text" value={position} onChange={e => setPosition(e.target.value)}/>
</form>
)
}
export default UserStatus;
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.
function useStateGroup<T extends {}>(group: T): [T, Setters<T>]