Over-stateful NPM

See Demo On Codesandbox

✨ 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

$ 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

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 };
}

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...

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

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>
    </>
  );
};

✨