Skip to content
A light but scalable view-model library with react hooks
TypeScript CSS Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Release/0.8.3 (#127) Nov 21, 2019
src fix: 🐛 ts type check fail when class has constructor with param (#132) Nov 26, 2019
.huskyrc.js chore: use union configurations, improve build flow and umd package (#46 Sep 1, 2019
.prettierrc.js Release/0.8.3 (#127) Nov 21, 2019
.yarnrc chore(release): 0.8.4 Nov 26, 2019
LICENSE feat(Docs): update README & add license Aug 13, 2019
yarn.lock Release/0.8.3 (#127) Nov 21, 2019


Travis Codecov type-coverage npm GitHub release

David Peer David David Dev

Conventional Commits code style: prettier

A light but scalable view-model library with react hooks.


# yarn
yarn add stated-bean

# npm
npm i stated-bean


  • OOP: easy to integrate with DI(dependency inject) framework together
  • Familiar API: just provider and hooks
  • Small size: npm bundle size npm bundle size
  • Written in TypeScript

Online Demo

GitHub Pages: Integration with injection-js


Define a StatedBean

Plain object StatedBean

import { useBean } from 'stated-bean';

const CounterModel = {
  count: 0,
  decrement() {
  increment() {

function CounterDisplay() {
  const counter = useBean(() => CounterModel);

  return (
      <button onClick={counter.decrement}>-</button>
      <button onClick={counter.increment}>+</button>

function App() {
  return (
      <CounterDisplay />

Class StatedBean

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

class CounterModel {
  count = 0;

  increment() {

  decrement() {

function CounterDisplay() {
  const counter = useBean(CounterModel);

  return (
    // ...

Singleton and Named StatedBean

The named bean singleton bean can be resolved via useInject with the special name.

Define a named bean

class NamedBean {}

@StatedBean({ singleton: true })
class SingletonBean {}

Declare as a named bean by useBean

const model = useBean(CounterModel, { name: 'SpecialName' });

Provider container and inject the singleton bean

The beans was stored in the StatedBeanContainer witch be created by the StatedBeanProvider and bind to the React context. useInject will find the named bean from the container or it's parent container.

@StatedBean({ singleton: true })
class UserModel {
  user = { name: 'jack' };

function App() {
  return (
    <StatedBeanProvider providers={[UserModel]}>
      <UserDisplay />

function UserDisplay() {
  const model = useInject(UserModel);


Auto inject and watch the props

class InputModel implements InitializingBean {
  value: number;

  value$: BehaviorSubject<number>;

  afterProvided() {
    this.value$.subscribe(v => {
      this.value = v;

function Input(props: InputProps) {
  const model = useBean(InputModel, { props });

  return (
    // input component

Effect action state and observer

class SearchModel {

  search() {
    return fetchUsers();

const UserTable() {
  const model = useBean(SearchModel);
  const { loading, error } = useObserveEffect(model, "search");

  if (loading) {
    return <Loading />;
  return (
    // ...user table




Signature: @StatedBean(name?: string | symbol): ClassDecorator

Indicates that an annotated class is a StatedBean. The name may indicate a suggestion for the bean name. Its default value is


Signature: @Stated(): PropertyDecorator

Indicates that an annotated property is Stated. Its reassignment will be observed and notified to the container.


Signature: @AfterProvided(): MethodDecorator

The AfterProvided decorator is used on a method that needs to be executed after the StatedBean be instanced to perform any initialization.


Signature: @Effect(name?: string | symbol): MethodDecorator

The Effect decorator is used on a method that can get the execution state by useObserveEffect.

Props and ObservableProps

Signature: @Props(name?: string): PropertyDecorator @ObservableProps(name?: string): PropertyDecorator

The Props decorator is used on a property that can sync the value from props. The ObservableProps decorator is used on a BehaviorSubject property. You can subscribe the next new props value.

use Hooks


Signature: useBean<T>(typeOrSupplier: ClassType<T> | () => T, name?: string | symbol): T

The useBean will create an instance of the stated bean with a new StatedBeanContainer and listen for its data changes to trigger the re-rendering of the current component.


Signature: useInject<T>(type: ClassType<T>, option: UseStatedBeanOption<T> = {}): T

The useInject will get the instance of the stated bean from the StatedBeanContainer in the context and listen for its data changes to trigger the re-rendering of the current component.

option = {
  name: string | symbol;   // get/create the instance with special name
  dependentFields: Array<string | symbol>;   // do re-render when the special property changed


Signature: useObserveEffect(bean: StatedBeanType, name: string | symbol): EffectAction

observe the execution state of the method which with @Effect.


<StatedBeanProvider {...props: StatedBeanProviderProps} />

The StatedBeanProvider is responsible for creating an instance of the stated bean and dispatching an event after data changes.


interface StatedBeanProviderProps {
  types?: ClassType[];
  beans?: Array<StatedBeanType<unknown>>;
  beanProvider?: BeanProvider;
  application?: StatedBeanApplication;



You can’t perform that action at this time.