https://github.com/perry-mitchell/obstate

Generic object state management with events
https://github.com/perry-mitchell/obstate

Last synced: 23 days ago
JSON representation

Generic object state management with events

• Host: GitHub
• URL: https://github.com/perry-mitchell/obstate
• Owner: perry-mitchell
• License: mit
• Created: 2022-08-28T15:42:22.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-07-16T06:33:35.000Z (almost 3 years ago)
• Last Synced: 2025-11-27T09:27:22.163Z (7 months ago)
• Language: TypeScript
• Size: 282 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# ObState

> Generic object state management with events

[![obstate](https://img.shields.io/npm/v/obstate?color=blue&label=obstate&logo=npm&style=flat-square)](https://www.npmjs.com/package/obstate) ![Tests](https://github.com/perry-mitchell/obstate/actions/workflows/test.yml/badge.svg)

Simple state manager that uses objects to store and track state. Manage the object normally as it additionally provides events to listen to state changes.

ObState uses `Proxy`s to handle state changes, and then emits events using a standard `EventEmitter` interface.

## Usage

Import the `createStateObject` method and use it to wrap an object (a new object is returned, the old is not mutated):

```typescript

import { createStateObject } from "obstate";

const state = createStateObject({

    name: "Jane Doe",

    age: 24

});

state.on(

    "before",

    ({ property, newValue, currentValue }) =>

        console.log(`Will update '${property}': ${currentValue} => ${newValue}`)

);

state.on(

    "update",

    ({ property, newValue, oldValue }) =>

        console.log(`Did update '${property}':  ${oldValue} => ${newValue}`)

);

Object.assign(state, {

    name: "John Doe",

    age: 22

});

```

The example above would output:

```

Will update 'name': Jane Doe => John Doe

Did update 'name':  Jane Doe => John Doe

Will update 'age': 24 => 22

Did update 'age':  24 => 22

```

### React

[`react-obstate`](https://github.com/perry-mitchell/react-obstate) is a react toolkit that provides hooks for using state instances in React components.