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>
)