Back

Version 40

4/7/2024
/** @jsxImportSource https://esm.sh/react */
import ReactDom from "https://esm.sh/react-dom";
import { createStore } from "https://esm.sh/tinybase";
import { createRemotePersister } from "https://esm.sh/tinybase/persisters/persister-remote";
import { useValue } from "https://esm.sh/tinybase/ui-react";

// The store is automatically persisted on the remote server
const store = createStore();
const persister = createRemotePersister(store, `${window.location.origin}/load`, `${window.location.origin}/save`);
await persister.startAutoLoad({}, {
count: 0,
});
await persister.startAutoSave();

function Counter() {
const count = useValue("count", store);
return (
<div>
<h1>{count}</h1>
<button
onClick={() => {
store.setValue("count", count - 1);
}}
>
-
</button>
<button
onClick={() => {
store.setValue("count", count + 1);
}}
>
+
</button>
</div>
);
}
Updated: April 7, 2024