BlacBusiness Logic Components

Type-safe state containers with React integration

Get Started

View on GitHub

🎯

Type-Safe State Containers

Strong TypeScript inference for state, instances, and registry helpers.

⚡

Proxy-Based Tracking

Auto-tracking proxies detect accessed state and getters for precise re-renders.

♻️

Registry + Ref Counting

Acquire/release instances with automatic disposal when ref counts drop to zero.

🧩

Extensible Plugins

Observe lifecycle and state changes with a safe plugin API.

⚛️

React 18+ Hook

useBloc is built on useSyncExternalStore for concurrent-safe updates.

👀

Watch Utilities

watch and tracked let you react to state and getter dependencies outside React.

Quick Example

tsx

import { Cubit } from '@blac/core';
import { useBloc } from '@blac/react';

class CounterCubit extends Cubit<{ count: number }> {
  constructor() {
    super({ count: 0 });
  }
  increment = () => this.emit({ count: this.state.count + 1 });
}

function Counter() {
  const [state, counter] = useBloc(CounterCubit);
  return <button onClick={counter.increment}>{state.count}</button>;
}

Installation

bash

npm install @blac/core @blac/react