The next generation of react hooks

Elementos is a framework-agnostic reactive state management library with an emphasis on state composability and encapsulation. In elementos, state is modeled as a graph of observable state nodes. Try clicking the nodes below and watch as state changes propagate through the graph.

See the docsView on GitHub

Track browser events

Easily tap into browser api's like window resize events and create observables that automatically subscribe/unsubscribe listeners as needed.

Open in CodeSandbox
import { atom } from "elementos";
export const createWindowSize$ = () => {
  const size$ = atom(null);
  let listener = null;
  size$.onObserverChange(({ count }) => {
    // if there are no observers, remove listener
    if (count === 0 && listener) {
      window.removeEventListener("resize", listener);
      listener = null;
    } else if (count > 0 && !listener) {
      // if there are observers, add listener
      listener = () => {
        size$.actions.set({
          height: window.innerHeight,
          width: window.innerWidth
        });
      };
      listener();
      window.addEventListener("resize", listener);
    }
  });
  return size$;
};
import { atom, molecule, batched } from 'elementos'
const createVisibility$ = (defaultValue) => {
  return atom(defaultValue, {
    actions: (set) => ({
      open: () => set(true),
      close: () => set(false)
    })
  });
};
export const createDialog$ = ({ isOpen = false, context = null } = {}) => {
  const visibility$ = createVisibility$(isOpen);
  const context$ = atom(context);
  const dialog$ = molecule(
    {
      visibility: visibility$,
      context: context$
    },
    {
      actions: ({ visibility, context }) => ({
        open: batched((nextContext) => {
          context.actions.set(nextContext);
          visibility.actions.open();
        }),
        close: batched(() => {
          context.actions.set(null);
          visibility.actions.close();
        })
      }),
      deriver: ({ visibility, context }) => ({
        isOpen: visibility,
        context
      })
    }
  );
  return dialog$;
};

Manage dialog state

Create abstractions for common state needs like dialog visibility, requests, and pagination.

Open in CodeSandbox

Create dynamic intervals

Create dynamic intervals with update-able callbacks and interval times.

Open in CodeSandbox
import { atom, observe } from "elementos";
export const createInterval = (initialCallback, interval) => {
  const interval$ = atom(interval);
  let callback = initialCallback;
  const dispose = observe(interval$, (interval) => {
    const id = setInterval(() => {
      callback();
    }, interval);
    return () => {
      clearInterval(id);
    };
  });
  return {
    setInterval: interval$.actions.set,
    setCallback: (nextCallback) => {
      callback = nextCallback;
    },
    dispose
  };
};

An Elevator Pitch