# over-stateful

> A small state management with less setup and super scalability in your react app.

Latest version **1.0.0** (published 2020-05-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install over-stateful
pnpm add over-stateful
yarn add over-stateful
bun add over-stateful
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-05-20 |
| First published | 2020-02-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Adenekan Wonderful |
| Maintainers | codewonders |
| Keywords | javascript, codewonders, js, utility, functions, utilities, over-stateful, helper functions |

## Links

- npm: https://www.npmjs.com/package/over-stateful
- Repository: https://github.com/adenekan41/over-stateful
- Homepage: https://github.com/adenekan41/over-stateful#readme
- Issues: https://github.com/adenekan41/over-stateful/issues
- npm.io page: https://npm.io/package/over-stateful

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-05-20
- 0.0.9-beta.3 — 2020-03-03
- 0.0.9-beta.2 — 2020-03-03
- 0.0.9-beta.1 — 2020-03-03
- 0.0.9 — 2020-03-02
- 0.0.8 — 2020-03-01
- 0.0.7-beta-4 — 2020-03-01
- 0.0.7-beta-3 — 2020-03-01
- 0.0.7-beta-2 — 2020-03-01
- 0.0.7-beta-1 — 2020-03-01
- 0.0.7 — 2020-03-01
- 0.0.6-beta-2 — 2020-03-01
- 0.0.5-beta-2 — 2020-02-20
- 0.0.5-beta-1 — 2020-02-20
- 0.0.5 — 2020-02-20
- … 2 more at https://npm.io/package/over-stateful/versions

## README

<br />
<p align="center">
  <img src="https://i.ibb.co/vwXydQy/Group-1-1.png" width="170"/>
</p>
<h1 align="center">
  Over Stateful
</h1>
<p align="center">🐺A small state management with less setup and super scalability in your react
app.</p>

<br />

[![npm](https://badge.fury.io/js/over-stateful.svg)](https://www.npmjs.com/package/over-stateful)

[![NPM](https://nodei.co/npm/over-stateful.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/over-stateful/)

<!-- useState, but simplified for complex states in React apps. -->

### [See Demo On Codesandbox](https://codesandbox.io/s/overstatful-demo-7wtpn?fontsize=14&hidenavigation=1&theme=dark)

## ✨ Features

- 😎 Easy to learn
- 📦 ~590b (gzipped)
- 🔥 Easy to scale
- 🙅‍♂️ Zero dependencies
- ✂️ Super-flexible API
- ✅ Fully tested and reliable
- ⚒ CommonJS, ESM & browser standalone support

## 🔧 Installation

You can easily install this package with yarn or npm:

```
$ yarn add over-stateful
```

or

```
$ npm install --save over-stateful
```

## 📖 Usage

Some usage terms you need to be familar with – `createStore`, `useOverProvider`
and `useOverState`, `OverProvider`, `store` :

- _createStore_, takes in the central state and the central reducers,
- _useOverProvider_, internal tool that handles the reducer and state.
- _useOverState_, hooks that handle reading state and dispatching actions
- _OverProvider_, React element that takes in the store, -_store_, Proxy object
  with your state.

Here is a simple example: `store.js`

```js
export const addOne = () => ({ type: 'ADD_ONE_COUNT' });
export const minusOne = () => ({ type: 'MINUS_ONE_COUNT' });

export const countReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ONE_COUNT':
      return { count: state.count + 1 };
    case 'MINUS_ONE_COUNT':
      return { count: state.count - 1 };
}
```

```jsx
import React from 'react';
import { OverProvider, createStore } from 'over-stateful';
import { countReducer } from './store';
import App from './App';

const store = createStore({ count: 0 }, [countReducer]);
export default function Root() {
  return (
    <OverProvider store={store}>
      <App />
    </OverProvider>
  );
}
```

## Comparison with other state management (examples)

With other state mannagement, setup and learning curve is a lot harder and bent
you'd have to call/read `documentations` over and over again ..... For example:

- Redux state managment
- Easy State
- Mobx e.t.c

Meanwhile, with `over-stateful`, all you need is this, less documentation
required to get you going...

```jsx
import React from 'react';
import { OverProvider, createStore } from 'over-stateful';
import { countReducer } from './store';
import App from './App';

const store = createStore({ count: 0 }, [countReducer]);
export default function Root() {
  return (
    <OverProvider store={store}>
      <App />
    </OverProvider>
  );
}
```

`App.js`

```jsx
import React from 'react';
import { useOverState } from 'over-stateful';

const App = () => {
  const [state, dispatch] = useOverState();
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch(addOne())}> +1 </button>
      <button onClick={() => dispatch(minusOne())}> -1 </button>
    </>
  );
};
```

✨

## 🤝 License

> MIT © [codewonders.dev](https://codewonders.dev) &nbsp;&middot;&nbsp; GitHub
> [@adenekan41 / codewonders](https://github.com/adenekan41) >
> &nbsp;&middot;&nbsp;

---
_Source: https://npm.io/package/over-stateful · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._