browser.js

import { RoomService } from "@roomservice/browser";
import { useEffect, useState } from "react";

const client = new RoomService({
  auth: "/api/roomservice",
});

function useRoom(name) {
  const [room, setRoom] = useState();

  useEffect(() => {
    async function load() {
      const r = await client.room(name);
      setRoom(r);
    }

    load().catch(console.error);
  }, []);

  return room;
}

function useMap(room, mapName) {
  const [map, setMap] = useState();

  useEffect(() => {
    if (!room) return;
    const m = room.map(mapName);
    setMap(m);

    room.subscribe(m, (nextMap) => {
      setMap(nextMap);
    });
  }, [room]);

  return [map, setMap];
}

export default function Demo() {
  const room = useRoom("ibm");
  const [map, setMap] = useMap(room, "form");

  if (!map) return null;

  function onChange(e, key) {
    const nextMap = map.set(key, e.target.value);
    setMap(nextMap);
  }

  return (
    <div>
      <input value={map.get("one")} onChange={(e) => onChange(e, "one")} />
      <input value={map.get("two")} onChange={(e) => onChange(e, "two")} />
      <input value={map.get("three")} onChange={(e) => onChange(e, "three")} />
    </div>
  );
}