website/index.html at master · launch-io/website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="theme-color" content="#751C7C">
    <meta name="description" content="Launch.IO - Ultra Hip, Simple, and Fast, Time Traveling React State Management Library">
    <meta name="image" content="/images/logo-small.png">
    <title>Launch.IO - Ultra Hip, Simple, and Fast, Time Traveling React State Management Library</title>
    <link rel="icon" href="images/favicon.png" type="image/x-icon">
    <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
    <link rel="stylesheet" href="index.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.min.js"></script>
  </head>
  <body class="fade-in">
    <a href="https://github.com/launch-io/launch.io" class="logo"><img src="./images/logo-small.png" alt="Launch.IO" /></a>
    <h2 class="header">A Time Traveling React State Management Library.</h2>
    <p class="tagline">Ultra Hip. Ultra Simple. Ultra Tiny. Ultra Fast.</p>
    <div class="get-started">
      <a href="https://github.com/launch-io/launch.io">Get Started</a>
    </div>
    <a class="codesandbox" href="https://codesandbox.io/s/launchio-demo-yqo2n">Run Demo In CodeSandbox</a>
    <div class="code-block">
      <div class="code">
<pre><code class="language-shell">npm install launch.io</code></pre>
<pre><code class="language-javascript">
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 (
    &#x3C;div>
      &#x3C;p>Value: {state.value}&#x3C;/p>
      &#x3C;button type="button" onClick={() => actions.increase(calculatorStep)}>
        Increase
      &#x3C;/button>
        &#x3C;button type="button" onClick={() => actions.decrease(calculatorStep)}>
        Decrease
      &#x3C;/button>
      &#x3C;button type="button" onClick={() => historyActions.stepBack()}>
        Rewind Time
      &#x3C;/button>
      &#x3C;button type="button" onClick={() => historyActions.stepForward()}>
        Fast Forward Time
      &#x3C;/button>
    &#x3C;/div>
  );
};

ReactDOM.render(&#x3C;App />, document.getElementById('app'));
</code></pre>
      </div>
    </div>
    <p class="asterisk">(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.)</p>
  </body>
</html>