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.
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. |
blockIdandblockIdsare session-scoped block ids, the same ids the block hooks accept.toolis theInteractionToolobject that created the block (see useInteractionTool), andwidgetis theSignatureWidgetsnapshot of the field (see useWidgets).
Behavior
- Only the user's interactions emit events. Changes made through the hooks, undo and redo, and edits made with 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
useEffectinstead. To react to any document change, watch useDocumentRevision.
Example
import { useViewportEvent } from '@sdk-pdf/react'
function useTrackBlockMoves() {
useViewportEvent('blocksDragEnd', ({ blockIds, deltaX, deltaY }) => {
analytics.track('blocks-moved', { count: blockIds.length, deltaX, deltaY })
})
}