https://github.com/manuelbento19/state-man
A lightweight package for state management in React applications, designed as a simplified alternative to Zustand and the Context API.
https://github.com/manuelbento19/state-man
context-api react state-management zustand
Last synced: 11 months ago
JSON representation
A lightweight package for state management in React applications, designed as a simplified alternative to Zustand and the Context API.
- Host: GitHub
- URL: https://github.com/manuelbento19/state-man
- Owner: manuelbento19
- License: mit
- Created: 2024-09-29T20:27:05.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-10T14:16:54.000Z (12 months ago)
- Last Synced: 2025-03-18T16:12:56.499Z (11 months ago)
- Topics: context-api, react, state-management, zustand
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@bentoo/state-man
- Size: 119 KB
- Stars: 18
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @bentoo/state-man
It is a lightweight package for state management in React applications, designed as a simplified alternative to Zustand and the Context API. It offers an intuitive approach to managing global and local states, allowing you to keep your application organized and easy to maintain.
With an easy-to-use API, `@bentoo/state-man` is ideal for developers looking for an efficient solution for state management.
[](https://www.npmjs.com/package/@bentoo/state-man)
[](https://www.npmjs.com/package/@bentoo/state-man)
## Installation
You can install the package via NPM:
```bash
npm install @bentoo/state-man
```
or via Yarn:
```bash
yarn add @bentoo/state-man
```
or via pnpm:
```bash
pnpm add @bentoo/state-man
```
## Usage
Here’s a basic example of how to use `@bentoo/state-man` in your project:
### 1. create a store
```tsx
// ./stores/counter.ts
import { create } from "@bentoo/state-man";
export const useStore = create(0);
```
### 2. use your store anywhere
```tsx
// counter.tsx
export const Counter = () => {
const { state, setState } = useStore();
const increment = () => setState(state + 1);
return Count is {state};
};
```
```tsx
// App.tsx
import Counter from "./counter";
import { useStore } from "./stores/counter";
function App() {
const { state } = useStore();
return (
Now the counter is: {state}
);
}
export default App;
```
### Persisting Store Data
You can persist a store's data across sessions by saving it to a storage medium such as `localStorage`, `sessionStorage`, or other available storage options. This ensures that the data is retained even when the page is reloaded or the browser is closed and reopened.
Additionally, it is possible to synchronize the store's state across different tabs or windows. When a change is made in one tab or window, all other tabs or windows that share the same storage context. This allows you to update the state seamlessly across multiple views.
```jsx
import { create, persist } from "@bentoo/state-man";
const useUserStore = create(
persist({
name: "userStoreKey",
data: { name: "Bentoooo" },
storage: sessionStorage,
}),
);
```
This approach ensures both persistence and synchronization, enabling a consistent experience for users working across multiple tabs or windows.
#### `persist` Properties
| Property | Type | Description |
| --------- | --------- | --------------------------------------------------------------------------------------------------------------------------- |
| `name` | `string` | Unique name of the store, used as a key to store and retrieve data from storage. |
| `data` | `any` | Initial state value of the store. Can be any data type (number, string, object, array, etc.). |
| `storage` | `Storage` | Type of storage used for persistence. By default, it uses `localStorage`. It can be: `localStorage`, `sessionStorage`, etc. |
## Why @bentoo/state-man over Context API?
- Only components that needs to be updated are rendered
- Avoid unnecessary re-renders
- Offers a lighter configuration and less overhead, no context providers anymore
## Why @bentoo/state-man over Zustand?
- Offers a lighter configuration and less overhead
- Simple and un-opinionated
## Contribution
If you would like to contribute, feel free to open a pull request or report an issue.
1. Fork the project.
2. Create your feature branch (`git checkout -b my-new-feature`).
3. Commit your changes (`git commit -m 'Adding new feature'`).
4. Push to the branch (`git push origin my-new-feature`).
5. Open a Pull Request.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.