A Time Traveling React State Management Library.

Ultra Hip. Ultra Simple. Ultra Tiny. Ultra Fast.

Get Started
Run Demo In CodeSandbox
npm install launch.io

import React from "react";
import ReactDOM from 'react-dom';
import { initializeLaunch, useLaunch } from "launch.io";

const calculatorService = {
  name: "calculator",
  initialState: {
    value: 0,
  },
  actions: {
    increase: ({ state }, payload) => ({ value: state.value + payload }),
    decrease: ({ state }, payload) => ({ value: state.value - payload }),
  },
};

initializeLaunch([calculatorService], { enableTimeTravel: true });

const App = () => {
  const calculatorStep = 2;
  const state = useLaunch(({ state }) => state.calculator);
  const actions = useLaunch(({ actions }) => actions.calculator);
  const historyActions = useLaunch(({ actions }) => actions._history);

  return (
    <div>
      <p>Value: {state.value}</p>
      <button type="button" onClick={() => actions.increase(calculatorStep)}>
        Increase
      </button>
        <button type="button" onClick={() => actions.decrease(calculatorStep)}>
        Decrease
      </button>
      <button type="button" onClick={() => historyActions.stepBack()}>
        Rewind Time
      </button>
      <button type="button" onClick={() => historyActions.stepForward()}>
        Fast Forward Time
      </button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('app'));

(You probably don't need the overhead and extended features of other state management libraries. You just need Launch.IO and some good ice cream.)