Listening for Changes

Using SDK

To listen for data range changes use addListener.

// create a default workbook
const workbook:IWorkbook = new Workbook();
// get a range that can be iterators or allow for updates

const removeListener:RemoveListener = workbook.getRange('Sheet1!A1:E5000').addListener((event: WorkbookRangeEvent): void => {
  // do something with the range. We are justing going to log it.
  console.log(`We received an event from ${event.getSource().toString()}`);
});
// call removeListener() to remove the listener when finished

Using React

Hooks are available for React to make it easy to listen for changes. These are:

• useModelListener
• useModelSync
• useRangeListener

useModelSync example

import { type ISheet } from '@sheetxl/sdk';
import { useModelSync } from '@sheetxl/react';

/* Causes a re-render when style changes */
useModelSync<ISheet.IListeners>(sheet, 'onStyleChange');

useModelListener example

import { type ISheet } from '@sheetxl/sdk';
import { useModelListener } from '@sheetxl/react';

/* Updates state when there are changes to sheet */
useModelListener<ISheet, ISheet.IListeners>(sheet, {
  // See ISheet.IListeners for all events
  onBeforeSave?(source: ISheet): Promise<void> | void {
    // throw an exception to prevent save.
  },
  onSave(source: ISheet, json: ISheet.JSON): void {
    // do something with the json
  },
}, {
  // Optional: ignores changes due to the model
  ignoreModelChange: true
});