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.
You can install the package via NPM:
npm install @bentoo/state-man
or via Yarn:
yarn add @bentoo/state-man
or via pnpm:
pnpm add @bentoo/state-man
Here’s a basic example of how to use @bentoo/state-man
in your project:
// ./stores/counter.ts
import { create } from '@bentoo/state-man'
export const useStore = create(0)
// counter.tsx
export const Counter = () => {
const {state,setState} = useStore()
const increment = () => setState(state + 1);
return (
<button onClick={increment}>
Count is {state}
</button>
);
}
// App.tsx
import Counter from './counter'
import { useStore } from './stores/counter'
function App() {
const {state} = useStore()
return (
<div className="card">
<h1>Now the counter is: {state}</h1>
<Counter/>
</div>
)
}
export default App
- 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
- Offers a lighter configuration and less overhead
- Simple and un-opinionated
If you would like to contribute, feel free to open a pull request or report an issue.
- Fork the project.
- Create your feature branch (
git checkout -b my-new-feature
). - Commit your changes (
git commit -m 'Adding new feature'
). - Push to the branch (
git push origin my-new-feature
). - Open a Pull Request.
This project is licensed under the MIT License. See the LICENSE file for more details.