Yjs Collaboration

Add real-time collaboration to Spreadsheet 2 using Yjs

You can install Yjs hook as a separate module

yarn

yarn add "@rowsncolumns/y-spreadsheet"

npm

npm install "@rowsncolumns/y-spreadsheet"

Initializing Yjs

This hook uses WebSocketProvider from Yjs to initialize a connection to one of the demo servers wss://demos.yjs.dev

The default provider can be easily switched to WebRTCProvider, but as of right now, WebRTC does not support synced events.

Running yjs locally

HOST=localhost PORT=1234 npx y-websocket

import {
  SheetData,
  useSpreadsheetState,
} from "@rowsncolumns/spreadsheet-state";
import { useYSpreadsheet } from "@rowsncolumns/yjs-spreadsheet"
import { SpreadsheetProvider, CanvasGrid } from '@rowsncolumns/spreadsheet'

const MySpreadsheet = () => {
  const userId = 'foobar'
  const name = 'foobar'
  const [sheets, onChangeSheets] = useState<Sheet[]>([]);
  const [sheetData, onChangeSheetData] = useState<SheetData<CellData>>({});
  const [tables, onChangeTables] = useState<TableView[]>([]);
  
  const { activeCell, activeSheetId enqueueCalculation, ... } = useSpreadsheetState({
    ....,
    onChangeHistory(patches) {
      onBroadcastPatch(patches);
    },
  })
  
  // Add Yjs hook
  const { users, onBroadcastPatch } = useYSpreadsheet({
    onChangeSheetData,
    onChangeSheets,
    onChangeTables,
    enqueueCalculation,
    sheetId: activeSheetId,
    activeCell,

    // User info
    userId,
    title: name,
  });


  return (
    <CanvasGrid
      {...}
      users={users}
      userId={userId}
    >
  )

}

const App = () => (
  <SpreadsheetProvider>
    <MySpreadsheet />
  </SpreadsheetProvider>
)