useInteractionTool

Returns the active interaction tool and re-renders the component when it changes, such as for highlighting the active tool button.

const interactionTool = useInteractionTool()

Interaction tools

An InteractionTool decides what a press on a page does. Each variant is distinguished by type:

Tool	What a press on a page does
`{ type: 'select' }`	The default. Selects the block under the pointer; a drag on the page selects all blocks inside the dragged rectangle.
`{ type: 'textSelect' }`	Native text selection, as on a web page.
`{ type: 'addText' }`	Creates a text paragraph at the pointer and focuses it for editing.
`{ type: 'addWidget', widgetProps, shiftX?, shiftY? }`	Creates a form widget at the pointer and selects it.
`{ type: 'addImage', image, width?, height? }`	Places an image centered at the pointer and selects it.

After an add tool creates its block, the tool switches back to select; the content policy is preserved. The addToolApplied event of useViewportEvent reports the created block.
widgetProps are the widget props of useWidgetsCreate without pageId, x, and y: the press decides those. The widget's bottom-left corner lands at the pointer, shifted by shiftX and shiftY user-space units (0 by default). While the tool is active, a preview follows the cursor: see WidgetPreview.
image is a staged image from stageImage. width and height set the placed size in user-space units; a single given dimension is completed from the image's aspect ratio. Without either, the image is placed at its natural size, one image pixel per user-space unit, scaled down to fit the page.

Example

The returned object is the same reference that was passed to useSetInteractionMode, so comparing with your own tool constants works with ===:

import {
  InteractionTool,
  useInteractionTool,
  useSetInteractionMode,
} from '@sdk-pdf/react'

const addTextTool: InteractionTool = { type: 'addText' }

function AddTextButton() {
  const interactionTool = useInteractionTool()
  const setInteractionMode = useSetInteractionMode()

  return (
    <button
      aria-pressed={interactionTool === addTextTool}
      onClick={() => setInteractionMode(addTextTool)}
    >
      Add text
    </button>
  )
}

Setting a tool equal field by field to the active one keeps the active reference, so for tools built on the fly, compare interactionTool.type instead.

useInteractionTool

Interaction tools

Example

On this page