react-use-state-group

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>]