2.0.2 • Published 6 months ago
@wal.js/react v2.0.2
@wal.js/react
@wal.js/react allows you to use wal.js in React. It adds a hook that takes a watcher. The hook keeps the state of the watcher in sync with the component.
Install
Install from npm using your preferred package manage.
npm i @wal.js/react
yarn add @wal.js/react
pnpm i @wal.js/react
wal()
wal() is a composable that takes a watcher and returns a reactive value.
Usage
import { Watcher } from "@wal.js/core";
import { useWatcher } from "@wal.js/react";
export const CounterWatcher = new Watcher(0);
export default function Counter() {
useWatcher(CounterWatcher);
return (
<div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex flex-col items-center gap-4">
<h1 className="text-xl font-bold">React Counter</h1>
<div className="flex gap-2">
<button
className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors"
onMouseDown={() => (CounterWatcher.value -= 1)}
>
Decrement
</button>
<h2 className="text-xl font-bold">{CounterWatcher.value}</h2>
<button
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
onMouseDown={() => (CounterWatcher.value += 1)}
>
Increment
</button>
</div>
</div>
);
}