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!
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!
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
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
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.
Last modified 11mo ago