Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 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 (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-23T17:08:41.000Z (4 months ago)
- Last Synced: 2024-10-23T23:12:44.140Z (4 months ago)
- Topics: context-api, react, state-management, zustand
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@bentoo/state-man
- Size: 92.8 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- 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}
);
}
// 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
```
## Why @bentoo/state-man over Context API?
- Only components that actually need 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.