# Insert Image Editor

<figure><img src="https://67932947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHWsslZpYESUXxPccoyig%2Fuploads%2Fgit-blob-88d651e6b10c541c816d4a924eb066dbf4ee2d50%2Fimage.png?alt=media" alt=""><figcaption><p>Insert Image editor</p></figcaption></figure>

{% code overflow="wrap" %}

```tsx
import { CanvasGrid, SpreadsheetProvider } from "@rowsncolumns/spreadsheet"
import { useSpreadsheet, InsertImageDialog, InsertImageEditor } from "@rowsncolumns/spreadsheet-state"

const Spreadsheet = () => {
  const {
    activeSheetId,
    activeCell,
    selections,
    onInsertImage,
    onRequestInsertImage
  } = useSpreadsheetState({})
  
  return (
    <>
      <button onClick={() => onRequestInsertImage()}>Insert image</button>
      <InsertImageDialog>
        <InsertImageEditor
          sheetId={activeSheetId}
          activeCell={activeCell}
          selections={selections}
          onInsertImage={onInsertImage}
        />
      </InsertImageDialog>
    </>
  )
}

const App = () => (
  <SpreadsheetProvider>
    <Spreadsheet />
  </SpreadsheetProvider>
)
```

{% endcode %}