# createViewportHandler

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



Wraps a [useHotkeys](https://sdk.pdf.net/docs/v1/reference/useHotkeys) handler so it runs only when the focus is inside the [Viewport](https://sdk.pdf.net/docs/v1/reference/Viewport) or nowhere. Use it for text formatting shortcuts, such as bold and italic, which must work while the user edits text on a page but not while they type in your own inputs.

```ts
const handler = createViewportHandler(handler)
```

* Takes a `HotkeyHandler` and returns a new one. While the focus is outside the viewport, the returned handler skips yours and returns `false`, so the key keeps its default effect.
* The wrapper only checks the focus: your handler still decides whether the action applies, for example with `isApplicable` from [useSelectionTextStyle](https://sdk.pdf.net/docs/v1/reference/useSelectionTextStyle).
* For block shortcuts, such as deleting or moving the selected blocks, use [createUnfocusedHandler](https://sdk.pdf.net/docs/v1/reference/createUnfocusedHandler): it keeps them inactive while the user edits text.

## Example [#example]

```tsx
import { useMemo } from 'react'
import { createViewportHandler, useHotkeys, useSelectionTextStyle } from '@sdk-pdf/react'

function useTextStyleHotkeys() {
  const { isApplicable, isBold, isItalic } = useSelectionTextStyle()

  useHotkeys(
    useMemo(
      () =>
        isApplicable && {
          'Mod-b': createViewportHandler(() => isBold.set(!isBold.value)),
          'Mod-i': createViewportHandler(() => isItalic.set(!isItalic.value)),
        },
      [isApplicable, isBold, isItalic]
    )
  )
}
```