Checkout this quick example:
import { useState } from "react";import { Evt } from "evt";import { useEvt } from "evt/hooks";​const evtTick = Evt.create();​setInterval(()=> evtTick.post(), 1000);​function App(){​const [count, setCount]= useState(0);​useEvt(ctx=> {evtTick.attach(ctx, ()=> setCount(count+1));},[count]);return <h1>tick count: {count}</h1>;​​}​
​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.
Evt let enables you to create powerful custom hooks. Here are some examples:
import { Evt } from "evt";import { useEvt, useStatefulEvt } from "evt/hooks";​export function useWindowInnerWidth() {​const evtInnerWidth = useEvt(ctx =>Evt.from(ctx, window, "resize").toStateful().pipe(() => [window.innerWidth]),[]);​useStatefulEvt([evtInnerWidth]);​return { "windowInnerWidth": evtInnerWidth.state };​}​
Usage ( you'll have to resize the window to see the text change )
import { useWindowInnerWidth } from "app/utils/hooks/useWindowInnerWidth.ts";​export function MyComponent(){​const { windowInnerWidth } = useWindowInnerWidth();return <h1>window.innerWidth is: {windowInnerWidth}px</h1>;​}
This example will only work with EVT v2.0​
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.
import { useState } from "react";import { Evt } from "evt";import { useEvt } from "evt/hooks";​​const key = "isDarkModeEnabled_dXddOm";​const evtIsDarkModeEnabled = Evt.create((() => {​const value = localStorage.getItem(key);​return value === null ? null : value === "true";​})() ??window.matchMedia("(prefers-color-scheme: dark)").matches);​evtIsDarkModeEnabled.attach(isDarkModeEnabled => localStorage.setItem(key, isDarkModeEnabled ? "true" : "false"));​​​export function useIsDarkModeEnabled(): {isDarkModeEnabled: boolean;setIsDarkModeEnabled(params: { isDarkModeEnabled: boolean; }): void;} {​const [isDarkModeEnabled, setIsDarkModeEnabled] =useState(evtIsDarkModeEnabled.state);​useEvt(ctx =>evtIsDarkModeEnabled.toStateless(ctx) //We use .toStateless() to avoid calling setIsDarkModeEnabled on first render.attach(setIsDarkModeEnabled),[]);​return {isDarkModeEnabled,"setIsDarkModeEnabled": ({ isDarkModeEnabled }) =>evtIsDarkModeEnabled.state = isDarkModeEnabled};​​}
You can use this react-hooks/exhaustive-deps
setting to be warned if you forget a dependency:
//package.json (if you use create-react-app otherwise use .eslintrc.js){"eslintConfig": {"extends": ["react-app","react-app/jest"],"rules": {"react-hooks/rules-of-hooks": "error","react-hooks/exhaustive-deps": ["error",{"additionalHooks": "(useEvt)"}]}}}
Live code​
Just a basic example to demonstrate how to use the Hooks.
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​
​