# useSpreadsheet

{% hint style="info" %}
Wrap your app in `SpreadsheetProvider` to use `useSpreadsheet` hook
{% endhint %}

```tsx
import { SpreadsheetProvider, CanvasGrid, useSpreadsheet } from "@rowsncolumns/spreadsheet";

const MySpreadsheet = () => {
  const {
    makeEditable,
    canEditCell,
    cancelEditor,
    focusSheet,
    getCellBounds,
    getCellDimensions,
    getContentfulGridRangeAroundCell,
    getNamedRanges,
    getNextFocusableCell,
    getRowHeight,
    getSelectionsFromFormula,
    getTableColumnNames,
    getTableNames,
    onEditorKeyDown,
    scrollToCell,
    setEditorValue,
    submitEditor,
    updateSelectionStartEndReference,
    tokenizer,
  } = useSpreadsheet();
  return (
    <CanvasGrid />
  );
};

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

| API                                | Description                                                                       |
| ---------------------------------- | --------------------------------------------------------------------------------- |
| `makeEditable`                     | Manually trigger a cell to be in edit mode                                        |
| `canEditCell`                      | Verify if a cell is editable, respects protected ranges                           |
| `cancelEditor`                     | Cancels edit mode                                                                 |
| `focusSheet`                       | Trigger focus on the Spreadsheet                                                  |
| `getCellBounds`                    | Get relative position of a cell relative to container                             |
| `getCellDimensions`                | Get dimension (x, y, width, height) of a cell                                     |
| `getContentfulGridRangeAroundCell` | Get range around a specific cells that has content                                |
| `getNamedRanges`                   | Get all named ranges of a sheet                                                   |
| `getNextFocusableCell`             | Get next available cell that can be focused. Skips hidden cells, rows and columns |
| `getRowHeight`                     | Returns row height of a rowIndex                                                  |
| `getSelectionsFromFormula`         | Get all selections from text                                                      |
| `getTableColumnNames`              | Helper function to retrieve table column names                                    |
| `getTableNames`                    | Helper function to retrieve table names                                           |
| `onEditorKeyDown`                  | Callback when user enters value in editor                                         |
| `scrollToCell`                     | Scroll to a cell                                                                  |
| `setEditorValue`                   | Imperatively set value in the editor                                              |
| `submitEditor`                     | Submit value of a editor                                                          |
| `updateSelectionStartEndReference` | Internal function to update selection references                                  |
| `tokenizer`                        | Tokenizer formulas to identify selections and structured references               |
| `flash`                            | Flash a range of cells with a specified color and duration                        |
| `showCellPopover`                  | Show a popover at a specific cell location with custom content                    |
| `dispatchEvent`                    | Dispatch events to the spreadsheet grid                                           |
| `redrawGrid`                       | Manually trigger a redraw of the grid                                             |

## Examples

### Flash cells

Flash a range of cells to draw user attention:

```tsx
const { flash } = useSpreadsheet();

// Flash a range with yellow color for 1.5 seconds
flash?.(
  {
    startRowIndex: 2,
    endRowIndex: 3,
    startColumnIndex: 2,
    endColumnIndex: 3,
    sheetId: activeSheetId,
  },
  "#ffcc00",
  1500
);
```

### Show cell popover

Display custom content in a popover at a specific cell:

```tsx
const { showCellPopover } = useSpreadsheet();

showCellPopover?.(
  {
    rowIndex: 2,
    columnIndex: 3,
    sheetId: 1,
  },
  () => <div>Custom popover content</div>
);
```

### Redraw grid

Manually trigger a grid redraw (useful after loading custom fonts):

```tsx
const { redrawGrid } = useSpreadsheet();

loadWebFont(["Lobster"]).then(() => {
  redrawGrid?.();
});
```