react-group-state v1.0.0-beta.3

react-group-state

About

Use state management style from React class components in function components

Idea

setState in class components in React

Alternatives

• react-use-state-group by chenyuwang

How to Install

First, install the library in your project by npm:

$ npm install react-group-state

Or Yarn:

$ yarn add react-group-state

Getting Started

• Import hook in React application file:

import { useGroupState } from 'react-group-state';

Params

Returned Values

Example

• Use useGroupState Hook:

import React from 'react';
import { useGroupState } from 'react-group-state';

const App = () => {
  const [state, setState] = useGroupState({
    name: 'John',
    email: 'john@example.com',
    age: 21,
  });

  const updateUserInfo = () => {
    setState({
      name: 'Paul',
      age: 37,
    });
  };

  return (
    <>
      <p>
        {state.name} is {state.age} years old
      </p>

      <button onClick={updateUserInfo}>Change user name and age</button>
    </>
  );
};

export default App;

setState(
  ({ age }) => ({
    name: 'Paul',
    age: age + 16,
  }),
  (newState) => console.log(JSON.stringify(newState))
);

License

This project is licensed under the MIT License © 2020-present Jakub Biesiada