TypeScript icon, indicating that this package has built-in type declarations

    0.13.2 • Public • Published

    Launch.IO Logo

    Build Npm version Bundlephobia Npm types

    Launch.IO is an Ultra Hip, Simple, and Fast, Time Traveling React State Management Library.

    It provides the means to easily and consistently split up your application state into different services. Create actions within those services that will predictably update your application state time and time again. (Batteries and Time Travel Debugging are included.)

    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.

    Simple. Fast. Tiny.

    Everything you need. (Except for the ice cream.)


    npm install

    Getting Started

    You can find a working example, of below, within this repository.

    Create your application services (as many as you'd like!). Each service should have a name, initialState, and a set of actions.

    const calculatorService = {
      name: "calculator",
      initialState: {
        value: 0,
      // It is recommended that you do not mutate the incoming state; instead return a brand new state.
      actions: {
        increase: ({ state }, payload) => ({ value: state.value + payload }),
        decrease: ({ state }, payload) => ({ value: state.value - payload }),

    Initialize your React application with Launch.IO using initializeLaunch and pass your array of application services along with any options you'd like to specify.

    import React from "react";
    import { initializeLaunch } from "";
    initializeLaunch([calculatorService], { enableTimeTravel: true });
    const App = () => {
      return <div className="MyApp">...</div>;
    export default App;

    Use the Launch.IO useLaunch hook to access your services state and launch actions.

    import React from "react";
    import { useLaunch } from "";
    const CalculatorForm = () => {
      const calculatorStep = 2;
      const state = useLaunch(({ state }) => state.calculator);
      const actions = useLaunch(({ actions }) => actions.calculator);
      return (
          <p>Value: {state.value}</p>
          <button type="button" onClick={() => actions.increase(calculatorStep)}>
          <button type="button" onClick={() => actions.decrease(calculatorStep)}>


    What do you mean?! You pretty much know the library by now. Get at it!

    API Documentation


    The hipness factor of this library is off the charts.

    Check out the official stats.

    Category Rating
    Complexity Ultra Simple
    Size Ultra Tiny
    Performance Ultra Fast
    Overall Ranking Ultra Hip


    This is direction that React state management libraries need to be headed in! -- Anonymous

    I love ice cream. -- Anonymous

    Impressive! Makes me question why have I been using other complex state management libraries when this simply gets the job done?! -- Anonymous

    This library is lit and totally vibing! -- Anonymous

    Dad, are you working on your library, again?! Let's play some Minecraft. -- Anonymous

    More coming soon!




    npm i

    DownloadsWeekly Downloads






    Unpacked Size

    151 kB

    Total Files


    Last publish


    • avatar