https://github.com/cool-hooks/react-group-state
📬 Use the state management style from React class components in function components
https://github.com/cool-hooks/react-group-state
group hooks management react state
Last synced: 3 months ago
JSON representation
📬 Use the state management style from React class components in function components
- Host: GitHub
- URL: https://github.com/cool-hooks/react-group-state
- Owner: cool-hooks
- License: mit
- Created: 2020-07-28T21:19:12.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2023-01-06T13:52:47.000Z (over 3 years ago)
- Last Synced: 2025-12-20T03:12:24.091Z (7 months ago)
- Topics: group, hooks, management, react, state
- Language: TypeScript
- Homepage: https://codesandbox.io/s/react-group-state-q4iss
- Size: 1.28 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# [react-group-state](https://github.com/cool-hooks/react-group-state)
[](https://www.npmjs.com/package/react-group-state)
[](https://www.npmjs.com/package/react-group-state)
[](https://www.npmjs.com/package/react-group-state)
[](https://codecov.io/gh/cool-hooks/react-group-state)
[](https://travis-ci.com/cool-hooks/react-group-state)
[](https://bundlephobia.com/result?p=react-group-state)
## About
Use state management style from React class components in function components
### Idea
[**setState**](https://reactjs.org/docs/react-component.html#setstate) in class components in React
### Demo
**[Playground – play with library in CodeSandbox](https://codesandbox.io/s/react-group-state-q4iss)**
### Alternatives
- [react-use-state-group](https://www.npmjs.com/package/react-use-state-group/) by [chenyuwang](https://www.npmjs.com/~chenyuwang/)
## How to Install
First, install the library in your project by npm:
```sh
$ npm install react-group-state
```
Or Yarn:
```sh
$ yarn add react-group-state
```
## Getting Started
• Import hook in React application file:
```js
import { useGroupState } from 'react-group-state';
```
#### Params
| Name | Type | Description |
| --------- | ------ | ------------- |
| **state** | object | Initial state |
#### Returned Values
| Name | Type | Description |
| ------------ | ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **state** | object | State |
| **setState** | (object or (prevState) => object, (newState) => void) | Function to set new state where **the first parameter** is new object or function with previous state that returns object and **second parameter** where value passed to function is updated state |
## Example
**• Use `useGroupState` Hook:**
```jsx
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 (
<>
{state.name} is {state.age} years old
Change user name and age
>
);
};
export default App;
```
```js
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