# Keyboard shortcuts

Navigate, zoom, rotate and go fullscreen from the keyboard while focus is in the viewer, without stealing keys from the rest of your app.

## Basics

Shortcuts work while focus is anywhere inside the viewer; click the page or <kbd>Tab</kbd> to the document area first.

**Demo: Try the shortcuts**

```tsx
import { PdfViewer } from '@kingtech/react-pdf-viewer';

export default function Demo() {
  // Click the page (or Tab to it), then try ← →, + − 0, r and f.
  return <PdfViewer source="/samples/multipage.pdf" />;
}
```

Shortcuts never fire while typing in an input, select or text area, or with <kbd>Alt</kbd>, <kbd>Ctrl</kbd> or <kbd>⌘</kbd> held, so browser and app shortcuts keep working. <kbd>Shift</kbd> with arrows is left alone for text selection.

### Toolbar and menu keys

The toolbar is a single tab stop. Inside it, <kbd>←</kbd> <kbd>→</kbd> <kbd>Home</kbd> <kbd>End</kbd> move between controls. On the **⋮ More actions** button, <kbd>Enter</kbd>, <kbd>Space</kbd> or <kbd>↓</kbd> open the menu on its first item and <kbd>↑</kbd> on its last; inside the menu, arrows move and <kbd>Esc</kbd> closes it and returns focus.

### Turning shortcuts off

`keyboardShortcuts={false}` disables the viewer's shortcuts when your app uses the same keys. Toolbar, menu and form keys keep working.

**Demo: Shortcuts disabled**

```tsx
import { PdfViewer } from '@kingtech/react-pdf-viewer';

export default function Demo() {
  // Your app owns these keys: the viewer ignores them. The toolbar stays keyboard-operable.
  return <PdfViewer source="/samples/multipage.pdf" keyboardShortcuts={false} />;
}
```

## Customization

Focus indicators are CSS variables: `--rpv-focus-ring` and `--rpv-focus-ring-offset` for toolbar controls, `--rpv-accent` for the document area, thumbnails and links.

**Demo: A high-visibility focus ring**

```tsx
import { PdfViewer } from '@kingtech/react-pdf-viewer';
import type { CSSProperties } from 'react';

// A stronger focus ring for the toolbar and a matching accent for the document area.
const style = {
  '--rpv-focus-ring': '3px solid #facc15',
  '--rpv-focus-ring-offset': '3px',
  '--rpv-accent': '#ca8a04',
} as CSSProperties;

export default function Demo() {
  return <PdfViewer source="/samples/multipage.pdf" style={style} />;
}
```

See the [customization guide](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/customization/) and [Accessibility](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/guides/accessibility/).

## Advanced / escape hatch

To bind different keys, turn the built-in shortcuts off and call the [imperative API](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/imperative-api/) from your own key handler:

```tsx
const viewer = useRef<PdfViewerApi>(null);

useEffect(() => {
  const onKey = (event: KeyboardEvent) => {
    if (event.key === 'j') viewer.current?.nextPage();
    if (event.key === 'k') viewer.current?.previousPage();
  };
  window.addEventListener('keydown', onKey);
  return () => window.removeEventListener('keydown', onKey);
}, []);

<PdfViewer ref={viewer} source={url} keyboardShortcuts={false} />;
```

## Limitations

- **Keys cannot be remapped.** The key map is fixed. Workaround: disable it and handle keys yourself, as above.
- **Shortcuts need focus inside the viewer.** They are scoped to the viewer so they never interfere with the rest of the page. Workaround: focus the viewer programmatically, or use a global handler with the imperative API.

## API

- [Keyboard shortcuts](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/api/keyboard-shortcuts.md)

---

## Keyboard shortcuts reference

Keys the component handles, generated from `@shortcut` tags next to the implementation.

### Used by

- [Keyboard shortcuts](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/keyboard-shortcuts.md)

### Import

```ts
```

### Commands

| Name | Type | Default | Required | Description |
| --- | --- | --- | --- | --- |
| `0` | `0` | — | No | Reset zoom to `defaultScale`. |
| `PageUp` | `PageUp` | — | No | Previous page. |
| `PageDown` | `PageDown` | — | No | Next page. |
| `ArrowLeft` | `ArrowLeft` | — | No | Previous page; a zoomed page scrolls horizontally first. |
| `ArrowRight` | `ArrowRight` | — | No | Next page; a zoomed page scrolls horizontally first. |
| `Home` | `Home` | — | No | First page. |
| `End` | `End` | — | No | Last page. |
| `+` | ` + ` | — | No | Zoom in (`=` also works). |
| `-` | `-` | — | No | Zoom out (`_` also works). |
| `r` | `r` | — | No | Rotate clockwise. |
| `Shift+R` | `Shift + R` | — | No | Rotate counter-clockwise. |
| `f` | `f` | — | No | Toggle fullscreen. |
| `Ctrl+F` | `Ctrl + F` | — | No | Focus the search field (`⌘+F` on macOS); `Enter` and `Shift+Enter` step through matches, `Escape` clears. |

### Source

[packages/react-pdf-viewer/src/types.ts](https://github.com/kiralygyula92/react-pdf-viewer/blob/main/packages/react-pdf-viewer/src/types.ts#L271)