Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



21 Commits

Repository files navigation


A lightweight utility for managing global state and performing side-effects when it changes.

The underpinning of the Proxy-State is the Proxy Object (hence the name). However, setting this up can be laborsome and time-consuming, so Proxy-State acts as an abstraction layer on top of native APIs to make things easier.

Currently, Proxy-State has no support for Internet Explorer.


Install the package via npm or yarn:

npm install @cjkoepke/proxy-state

In your main entry file, create a store with the following:

import Store from 'proxy-state'

const { state, listen, detach, fetch } = Store({
  count: 0
}, true )

 * Update state directly. Subscribers to changes will get
 * old and new state as parameters.
state.count = 2;

 * Listen to all state changes.
listen((newState, oldState) => {
    // Do something.

 * Listen to state change for a specific property.
listen((newState, oldState) => {
    // Do something.
}, 'count' )

 * You can unsubscribe from listening to a properties changes
 * by detaching a registered listener.

The default import of the package gives you a constructor function, which takes two arguments:

  1. An object representing your default state.
  2. Whether to use debugging mode or not.


defaultState: {}

This is the default object to use as your state.

debug: false

Turn this on to allow helpful console logging.


listen: (fn( newState, oldState), ?key)

Applies a callback for when state changes. Optionally can pass a unique key as a secondary argument to only run the callback when a property that matches the key changes.

detach: (key)

Removes a registered callback by its the key that was used to register it.

fetch: (key,

Fetches an array of registered subscribers by their keys.


  1. Polyfill IE support.
  2. Allow listening to deeper object-tree value updates.