Skip to main content

Classy Store

Class-based reactive state management for React, Vue, Svelte, Solid, and Angular

Get Started - 5min ⏱️
import {createClassyStore} from '@codebelt/classy-store';
import {useStore} from '@codebelt/classy-store/react';

// 1. Define your state and logic in a class
class CounterStore {
  count = 0;
  increment() {
    this.count++;
  }
}

// 2. Create a reactive store instance
const counterStore = createClassyStore(new CounterStore());

// 3. Use it in React with automatic updates
function Counter() {
  const count = useStore(counterStore, (store) => store.count);
  return (
    <button onClick={() => counterStore.increment()}>
      Count is {count}
    </button>
  );
}

Deep Reactivity

Mutate nested objects directly. Our Proxy-based system automatically tracks changes and triggers targeted re-renders.

Forget {...state, nested: {...state.nested}} hell.

Simple & Familiar

Use standard ES6 classes to define your state and business logic. No complex reducers, actions, or dispatchers. Just JavaScript.

  • ✅ Zero boilerplate
  • ✅ Type-safe by nature
  • ✅ Framework agnostic core
// Works perfectly with nested objects - no spread operators!
class UserStore {
  profile = {
    name: 'John',
    settings: { theme: 'dark' }
  };

  toggleTheme() {
    // Direct mutation - Proxy handles the reactivity
    this.profile.settings.theme = 
      this.profile.settings.theme === 'dark' ? 'light' : 'dark';
  }
}

const userStore = createClassyStore(new UserStore());