chenfengjw163/stated-bean

Next light & scalable state management library with react hooks

stated-bean

Introduction

stated-bean is a light & scalable state management library with react hooks. Inspired by unstated-next

Install

npm install stated-bean

Features

• OOP: used with DI(denpendcy inject) framework togather
• Familiar API: just provider and hooks
• Small size: ~3kb (zipped ~1kb)
• Written in TypeScript

Usage

Stated Bean

import { StatedBean, Stated } from 'stated-bean';

@StatedBean()
export class Counter {
  @Stated()
  public count: number = 0;

  increment = () => {
    this.count++;
  };

  decrement = () => {
    this.count--;
  };
}

StatedBeanProvider

import { StatedBeanProvider } from 'stated-bean';

const App = () => {
  return (
    <StatedBeanProvider types={[Counter]}>
      <div>
        <CounterDisplay />
      </div>
      <CounterDisplay />

      <StatedBeanProvider types={[Counter]}>
        <CounterDisplay />
      </StatedBeanProvider>
    </StatedBeanProvider>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

useStatedBean

import { useStatedBean } from 'stated-bean';

function CounterDisplay() {
  const counter = useStatedBean(Counter);

  if (counter === undefined) {
    return null;
  }

  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <span>{counter.count}</span>
      <button onClick={counter.increment}>+</button>
    </div>
  );
}