# useViewportEvent

Source: https://sdk.pdf.net/docs/v1/reference/useViewportEvent



Subscribes to the user's interactions with the viewport: the actions the SDK performs in response to the user, which your code can't observe otherwise. The subscription follows the component lifecycle, and the callback doesn't need to be memoized.

```ts
useViewportEvent(event, callback)
```

| Event                  | Payload                        | Fires when                                                                                                                                                                                                                  |
| ---------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `zoomGestureStart`     | `{ scale }`                    | The user starts zooming with a pinch or Ctrl/Cmd + mouse wheel. `scale` is the scale before the gesture.                                                                                                                    |
| `zoomGestureEnd`       | `{ scale }`                    | The zoom gesture ends. `scale` is the final scale.                                                                                                                                                                          |
| `textEditorInput`      | `{ blockId }`                  | The user changes a paragraph text: typing, pasting, deleting.                                                                                                                                                               |
| `addToolApplied`       | `{ blockId, tool }`            | The user creates a block with an `addText`, `addWidget`, or `addImage` tool. The block is available through the hooks when the event fires; for an image, once the image is stored. A failed image placement emits nothing. |
| `blocksDragStart`      | `{ blockIds }`                 | The user starts dragging blocks. `blockIds` are the blocks selected at that moment.                                                                                                                                         |
| `blocksDragEnd`        | `{ blockIds, deltaX, deltaY }` | The drag ends. `deltaX` and `deltaY` are the total drag distance in user-space units, shared by all dragged blocks.                                                                                                         |
| `blockResizeDragStart` | `{ blockId }`                  | The user starts resizing a block by dragging one of its handles.                                                                                                                                                            |
| `blockResizeDragEnd`   | `{ blockId }`                  | The resize drag ends. The block already has its new size.                                                                                                                                                                   |
| `widgetInput`          | `{ blockId }`                  | The user changes a form field value through its control: typing, checking, picking an option.                                                                                                                               |
| `signatureRequest`     | `{ widget }`                   | The user activates an unsigned signature field. The SDK doesn't collect signatures: the event is the place to start your own signing flow, such as a dialog.                                                                |

* `blockId` and `blockIds` are session-scoped block ids, the same ids the block hooks accept. `tool` is the `InteractionTool` object that created the block (see [useInteractionTool](https://sdk.pdf.net/docs/v1/reference/useInteractionTool)), and `widget` is the `SignatureWidget` snapshot of the field (see [useWidgets](https://sdk.pdf.net/docs/v1/reference/useWidgets)).

## Behavior [#behavior]

* Only the user's interactions emit events. Changes made through the hooks, undo and redo, and edits made with [useProgrammaticEditor](https://sdk.pdf.net/docs/v1/reference/useProgrammaticEditor) emit none: track your own calls where you make them.
* State that a hook returns, such as the scale, the selection, or the active tool, has no events: watch the hook value with `useEffect` instead. To react to any document change, watch [useDocumentRevision](https://sdk.pdf.net/docs/v1/reference/useDocumentRevision).

## Example [#example]

```tsx
import { useViewportEvent } from '@sdk-pdf/react'

function useTrackBlockMoves() {
  useViewportEvent('blocksDragEnd', ({ blockIds, deltaX, deltaY }) => {
    analytics.track('blocks-moved', { count: blockIds.length, deltaX, deltaY })
  })
}
```