# useInteractionTool

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



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

```ts
const interactionTool = useInteractionTool()
```

## Interaction tools [#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](https://sdk.pdf.net/docs/v1/reference/useViewportEvent) reports the created block.
* `widgetProps` are the widget props of [useWidgetsCreate](https://sdk.pdf.net/docs/v1/reference/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](https://sdk.pdf.net/docs/v1/reference/WidgetPreview).
* `image` is a staged image from [stageImage](https://sdk.pdf.net/docs/v1/reference/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 [#example]

The returned object is the same reference that was passed to [useSetInteractionMode](https://sdk.pdf.net/docs/v1/reference/useSetInteractionMode), so comparing with your own tool constants works with `===`:

```tsx
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.