isotope

Minimal reactive library

Install

Download the CJS, ESM, UMD versions or install via NPM:

npm install @ryanmorr/isotope

Usage

Create a basic store that encapsulates a value:

import { store } from '@ryanmorr/isotope';

// Create a store with an initial value
const count = store(0);

// Get the store value
count.value(); //=> 0

// Set the store value
count.set(1);

// Set the store value with a function
count.update((val) => val + 1);

Create a Redux-style reducer store for managing state:

import { reducer } from '@ryanmorr/isotope';

// Create a store with an initial state and reducer function
const counter = reducer({count: 0}, (state, action) => {
    switch (action.type) {
        case 'increment':
            return {count: state.count + 1};
        case 'decrement':
            return {count: state.count - 1};
        default:
            return state;
    }
});

counter.dispatch({type: 'increment'});
counter.value(); //=> {count: 1}
counter.dispatch({type: 'decrement'});
counter.value(); //=> {count: 0}

Create a reactive store that is based on the value of one or more other stores:

import { store, derived } from '@ryanmorr/isotope';

const firstName = store('John');
const lastName = store('Doe');
const fullName = derived(firstName, lastName, (first, last) => `${first} ${last}`);

fullName.value(); //=> "John Doe"
firstName.set('Jane');
fullName.value(); //=> "Jane Doe"

If the derived callback function defines an extra parameter in its signature, the derived store is treated as asynchronous. The callback function is provided a setter function for the store's value and no longer relies on the return value:

import { store, derived } from '@ryanmorr/isotope';

const param = store();

// Perform an ajax request and notify subscribers with the results
const results = derived(param, (data, set) => {
    fetch(`path/to/server/${encodeURIComponent(data)}`).then(set);
});

All stores support subscribing a callback function to be called when the store is updated, a function to unsubscribe is returned:

import { store } from '@ryanmorr/isotope';

const value = store('foo');

// Log the old and new values after a change
const unsubscribe = value.subscribe((newValue, oldValue) => console.log(newValue, oldValue));

// Trigger all subscribers to be called
value.set('bar');

// Remove subscription
unsubscribe();

Use the Store superclass for type checking or extending to create custom stores:

import { Store, store } from '@ryanmorr/isotope';

// Type check stores
store() instanceof Store; //=> true

// Extend to add custom functionality
class CustomStore extends Store {

}

License

This project is dedicated to the public domain as described by the Unlicense.