Skip to main content

useDocument

You can also subscribe directly to ledger updates, and automatically redraw when necessary. When sync is enabled you'll have both parties updating the same ledger in real-time. Here's an example of a simple shared text area (in real life you'd probably want to use an operational transform library like Yjs or Automerge for shared text areas, which both work great with Fireproof).

Acquire useDocument as the return value of useFireproof. Here's an example. This example creates a new document with a _id based on the customerId prop, and initializes the document with a name, company, and startedAt timestamp.

import { useFireproof } from 'use-fireproof';

const CustomerProfile = ({ customerId }) => {
const { useDocument } = useFireproof("my-todo-app")
const [doc, setDoc, saveDoc] = useDocument(() => ({
_id: `${customerId}-profile`,
name: "",
company: "",
startedAt: Date.now()
}));
return (
<div>
<form>
Name:
<input
type="text"
value={doc.name}
onChange={(e) => setDoc({ name: e.target.value })}
/>
Company:
<input
type="text"
value={doc.company}
onChange={(e) => setDoc({ company: e.target.value })}
/>
<button
onClick={(e) => {
e.preventDefault();
saveDoc();
}}
>
Save
</button>
</form>
<p>Started at: {doc.startedAt}</p>
<pre>{JSON.stringify(doc, null, 2)}</pre>
</div>
);
};

Create new documents with useDocument

You can also use useDocument to create new documents. Just don't pass in an _id as part of your initial doc, and the ledger will assign a new one when you call saveDoc. Pass false to saveDoc to reset to the initial state.