← Back to context

Comment by jchrisa

5 days ago

Here is the code sample I mentioned, example React usage (see our homepage for Vanilla JS)

    import { useFireproof, useDocument } from "use-fireproof";
    import { connect } from "@fireproof/cloud";

    export default function App() {
      const { database, useLiveQuery } = useFireproof("my_db");
      connect(database, "my-remote");
      const { docs } = useLiveQuery("_id");

      const [newDoc, setNewDoc, saveNewDoc] = useDocument({ input: "" });

      const handleSubmit = async (e) => {
        e.preventDefault();
        if (newDoc.input) {
          await saveNewDoc();
          setNewDoc({ input: "" }); // Reset for new entry
        }
      };

      return (
        <div>
          <form onSubmit={handleSubmit}>
            <input
              value={newDoc.input}
              onChange={(e) => setNewDoc({ input: e.target.value })}
            />
            <button>Add</button>
          </form>
          <ul>
            {docs.map((doc) => (
              <li key={doc._id}>{JSON.stringify(doc)}</li>
            ))}
          </ul>
        </div>
      );
    }