ng-usestate

React-like useState hook for Angular using Signals. Provides familiar state management with Angular's reactive system.

Installation

npm install ng-usestate

Requirements

• Angular 19+
• TypeScript 5.6+

Usage

import { Component } from '@angular/core';
import { useState } from 'ng-usestate';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <h2>Count: {{ count() }}</h2>
      <button (click)="increment()">+1</button>
      <button (click)="decrement()">-1</button>
      <button (click)="reset()">Reset</button>
    </div>
  `
})
export class CounterComponent {
  private [count, setCount] = useState(0);
  
  increment() {
    this.setCount(prev => prev + 1);
  }
  
  decrement() {
    this.setCount(prev => prev - 1);
  }
  
  reset() {
    this.setCount(0);
  }
}

Complex State

interface User {
  name: string;
  age: number;
}

@Component({
  template: `
    <div>
      <p>Name: {{ user().name }}</p>
      <p>Age: {{ user().age }}</p>
      <button (click)="updateAge()">Birthday!</button>
    </div>
  `
})
export class UserComponent {
  private [user, setUser] = useState<User>({ name: 'John', age: 25 });
  
  updateAge() {
    this.setUser(prev => ({ ...prev, age: prev.age + 1 }));
  }
}

API

useState<T>(initialState: T)

Returns a tuple with:

• signal: () => T - Readonly signal containing current state
• setState: (value: T | (prev: T) => T) => void - State updater function

Parameters:

• initialState: Initial state value

Returns:

• Readonly tuple [signal, setState]

Features

✅ React-like API
✅ TypeScript generics support
✅ Angular Signals integration
✅ Readonly signals prevent mutation
✅ Development mode warnings
✅ Tree-shakable
✅ Zero runtime dependencies

License

MIT

Build and Publish Commands

Build the library

# Build the library
npm run build:lib

# Watch mode for development
ng build ng-usestate --watch