Back
Version 30
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 { Provider, useSetValueCallback, useValue } from "https://esm.sh/tinybase/ui-react";
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");
const setValue = useSetValueCallback("count");
return (
<div>
<h1>{count}</h1>
<button onClick={() => {}}></button>
<button onClick={() => {}}></button>
</div>
);
}
function App() {
return (
<Provider store={store}>
<Counter />
</Provider>
);
}
const root = ReactDom.createRoot(document.body);
root.render(<App />);
Updated: April 7, 2024