React integration

EVT
Home GitHub
Search…
Why EVT ?
React integration
Evt let you work with events in react without having to worry about cleaning up afterward.
Checkout this quick example: 
1
import { useState } from "react";
2
import { Evt } from "evt";
3
import { useEvt } from "evt/hooks";
4
​
5
const evtTick = Evt.create();
6
​
7
setInterval(()=> evtTick.post(), 1000);
8
​
9
function App(){
10
​
11
    const [count, setCount]= useState(0);
12
​
13
    useEvt(ctx=> {
14
    
15
        evtTick.attach(ctx, ()=> setCount(count+1));
16
    
17
    
18
    },[count]);
19
    
20
    return <h1>tick count: {count}</h1>;
21
​
22
​
23
}
24
​
Copied!
​Run it​
The core idea is to always use the cts to attach handlers. This will enable EVT to detach/reload handlers when they need to be namely when the component is unmounted or a value used in a handler has changed.
Custom hooks
Evt let enables you to create powerful custom hooks. Here are some examples:
Custom hook that gives the innerWith of the window
1
import { Evt } from "evt";
2
import { useEvt, useRerenderOnStateChange } from "evt/hooks";
3
​
4
export function useWindowInnerWidth() {
5
​
6
    const evtInnerWidth = useEvt(ctx =>
7
        Evt.from(ctx, window, "resize")
8
            .toStateful()
9
            .pipe(() => [window.innerWidth])
10
        ,
11
        []
12
    );
13
​
14
    useRerenderOnStateChange(evtInnerWidth);
15
​
16
    return { "windowInnerWidth": evtInnerWidth.state };
17
​
18
}
19
​
Copied!
Usage ( you'll have to resize the window to see the text change )
1
import { useWindowInnerWidth } from "app/utils/hooks/useWindowInnerWidth.ts";
2
​
3
export function MyComponent(){
4
​
5
    const { windowInnerWidth } = useWindowInnerWidth();
6
    
7
    return <h1>window.innerWidth is: {windowInnerWidth}px</h1>;
8
​
9
}
Copied!
This example will only work with EVT v2.0​
Custom hooks that enable to toogle dark mode
This hook use for default value the OS default (true if the user have dark mode enabled system whild) and persist de result value in local storage.
1
import { useState } from "react";
2
import { Evt } from "evt";
3
import { useEvt } from "evt/hooks";
4
​
5
​
6
const key = "isDarkModeEnabled_dXddOm";
7
​
8
const evtIsDarkModeEnabled = Evt.create(
9
    (() => {
10
​
11
        const value = localStorage.getItem(key);
12
​
13
        return value === null ? null : value === "true";
14
​
15
    })() ??
16
    window.matchMedia("(prefers-color-scheme: dark)").matches
17
);
18
​
19
evtIsDarkModeEnabled.attach(
20
    isDarkModeEnabled => localStorage.setItem(
21
        key, isDarkModeEnabled ? "true" : "false"
22
    )
23
);
24
​
25
​
26
​
27
export function useIsDarkModeEnabled(): {
28
    isDarkModeEnabled: boolean;
29
    setIsDarkModeEnabled(params: { isDarkModeEnabled: boolean; }): void;
30
} {
31
​
32
    const [isDarkModeEnabled, setIsDarkModeEnabled] = 
33
        useState(evtIsDarkModeEnabled.state);
34
​
35
    useEvt(ctx =>
36
        evtIsDarkModeEnabled
37
            .toStateless(ctx) //We use .toStateless() to avoid calling setIsDarkModeEnabled on first render 
38
            .attach(setIsDarkModeEnabled),
39
        []
40
    );
41
​
42
    return {
43
        isDarkModeEnabled,
44
        "setIsDarkModeEnabled": ({ isDarkModeEnabled }) =>
45
            evtIsDarkModeEnabled.state = isDarkModeEnabled
46
    };
47
​
48
​
49
}
Copied!
ESLint
You can use this react-hooks/exhaustive-deps setting to be warned if you forget a dependency:
1
//package.json (if you use create-react-app otherwise use .eslintrc.js) 
2
{
3
  "eslintConfig": {
4
    "extends": [
5
      "react-app",
6
      "react-app/jest"
7
    ],
8
    "rules": {
9
      "react-hooks/rules-of-hooks": "error",
10
      "react-hooks/exhaustive-deps": [
11
        "error",
12
        {
13
          "additionalHooks": "(useEvt)"
14
        }
15
      ]
16
    }
17
  }
18
}
Copied!
Mini "Hello World" project Example 
 Live code​
Just a basic example to demonstrate how to use the Hooks.
Comprehensive example: A TODO list app
This example is meant to show how EVT can help you build fully reactive UI that can be synced in real time across devices.
It also provides gidelines on how to optimize as much as possible the performance of the UI.
NOTE: The request delay are simulated to show how the UI would handle slow network.
​Live code / GitHub repo​
​
Handler<T, U> (type)
Extending Evt
Last modified 7mo ago
Copy link
Contents
Custom hooks
Custom hook that gives the innerWith of the window
Custom hooks that enable to toogle dark mode
ESLint
Mini "Hello World" project Example
Comprehensive example: A TODO list app