Simple shared conflict free peer to peer state via valtio and y.js.

useRoom.ts

import * as Y from "yjs";
import { bindProxyAndYMap } from "valtio-yjs";
import { WebrtcProvider } from "y-webrtc";
import { IndexeddbPersistence } from "y-indexeddb";
import { proxy } from "valtio";
import { useMemo, useEffect } from "react";

type WebrtcProviderOptions = ConstructorParameters<typeof WebrtcProvider>[2];

export default function useRoom<T extends Record<string, unknown>>(
  roomname: string,
  password: string | null,
  initialState: T
) {
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const yDoc = useMemo(() => new Y.Doc(), [roomname, password]);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const room = useMemo(() => proxy(initialState), [roomname, password]);

  // Connect: Webrtc
  useEffect(() => {
    const options: Partial<WebrtcProviderOptions> = {
      password,
    };

    const provider = new WebrtcProvider(
      roomname,
      yDoc,
      options as WebrtcProviderOptions
    );
    return () => {
      provider.destroy();
    };
  }, [yDoc, roomname, password]);

  // Connect: IndexDB
  useEffect(() => {
    const provider = new IndexeddbPersistence(roomname, yDoc);
    return () => {
      provider.destroy();
    };
  }, [yDoc, roomname]);

  // Sync to ymap
  useEffect(() => {
    const ymap = yDoc.getMap("map");
    bindProxyAndYMap(room, ymap);
  }, [room, yDoc]);

  return room;
}

Warning

⚠️ DONT USE IN PRODUCTION!

Deps

npm i yjs y-indexeddb y-webrtc valtio-yjs

Usage

type Message = {
  username: string;
  createdAt: string;
  body: string;
};

type Room = {
  messages: Message[];
};

 function SomeComponent() {
  const room = useRoom<Room>(roomname, password, {
    messages: [],
  });
  const snap = useSnapshot(room);

  return (
    <>
      <div>
        {snap.messages.map((message, index) => (
          <div key={index}>{message}</div>
        ))}
      </div>
      <button
        onClick={() => {
          room.messages.push({
            username: "John",
            createdAt: new Date().toISOString(),
            body: "hello",
          });
        }}
      >
        Say Hello
      </button>
    </>
  );
}

The shape of your State is up to you :)