twenty/packages/twenty-docs/l/da/developers/frontend-development/hotkeys.mdx

---
title: Genvejstaster
image: /images/user-guide/table-views/table.png
---

<Frame>
  <img src="/images/user-guide/table-views/table.png" alt="Header" />
</Frame>

## Introduktion

Når du har brug for at lytte til en genvejstast, vil du normalt bruge `onKeyDown` event listener.

I `twenty-front` kan du opleve konflikter mellem de samme genvejstaster, som bruges i forskellige komponenter, monteret samtidigt.

For eksempel, hvis du har en side, der lytter efter Enter-tasten, og en modal, der lytter efter Enter-tasten, med en Vælg-komponent indeni den modal, der lytter efter Enter-tasten, kan du have en konflikt, når alle er monteret samtidig.

## `useScopedHotkeys` hook

For at håndtere dette problem har vi en tilpasset hook, der gør det muligt at lytte til genvejstaster uden konflikt.

Du placerer det i en komponent, og den vil kun lytte til genvejstasterne, når komponenten er monteret OG når den specifikke **genvejstast-omfang** er aktiv.

## Hvordan lytter man til genvejstaster i praksis?

Der er to trin involveret i opsætningen af genvejstast-lytning:

1. Indstil [genvejstast-omfanget](#what-is-a-hotkey-scope-), der vil lytte til genvejstaster
2. Brug `useScopedHotkeys` hook til at lytte til genvejstaster

Setting up hotkey scopes is required even in simple pages, because other UI elements like left menu or command menu might also listen to hotkeys.

## Anvendelsescases for genvejstaster

Generelt vil du have to anvendelsescases, der kræver genvejstaster:

1. På en side eller en komponent monteret i en side
2. I en modal-type komponent, der tager fokus på grund af en brugerhandling

Den anden anvendelsescase kan ske rekursivt: en dropdown i en modal for eksempel.

### At lytte til genvejstaster på en side

Eksempel :

```tsx
const PageListeningEnter = () => {
  const {
    setHotkeyScopeAndMemorizePreviousScope,
    goBackToPreviousHotkeyScope,
  } = usePreviousHotkeyScope();

  // 1. Set the hotkey scope in a useEffect
  useEffect(() => {
    setHotkeyScopeAndMemorizePreviousScope(
      ExampleHotkeyScopes.ExampleEnterPage,
    );

    // Revert to the previous hotkey scope when the component is unmounted
    return () => {
      goBackToPreviousHotkeyScope();
    };
  }, [goBackToPreviousHotkeyScope, setHotkeyScopeAndMemorizePreviousScope]);

  // 2. Use the useScopedHotkeys hook
  useScopedHotkeys(
    Key.Enter,
    () => {
      // Some logic executed on this page when the user presses Enter
      // ...
    },
    ExampleHotkeyScopes.ExampleEnterPage,
  );

  return <div>My page that listens for Enter</div>;
};
```

### At lytte til genvejstaster i en modal-type komponent

For dette eksempel vil vi bruge en modal-komponent, der lytter efter Escape-tasten for at fortælle sin parent at lukke den.

Here the user interaction is changing the scope.

```tsx
const ExamplePageWithModal = () => {
  const [showModal, setShowModal] = useState(false);

  const {
    setHotkeyScopeAndMemorizePreviousScope,
    goBackToPreviousHotkeyScope,
  } = usePreviousHotkeyScope();

  const handleOpenModalClick = () => {
    // 1. Set the hotkey scope when user opens the modal
    setShowModal(true);
    setHotkeyScopeAndMemorizePreviousScope(
      ExampleHotkeyScopes.ExampleModal,
    );
  };

  const handleModalClose = () => {
    // 1. Revert to the previous hotkey scope when the modal is closed
    setShowModal(false);
    goBackToPreviousHotkeyScope();
  };

  return <div>
    <h1>My page with a modal</h1>
    <button onClick={handleOpenModalClick}>Open modal</button>
    {showModal && <MyModalComponent onClose={handleModalClose} />}
  </div>;
};
```

Så i modal-komponenten:

```tsx
const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
  // 2. Use the useScopedHotkeys hook to listen for Escape.
  // Note that escape is a common hotkey that could be used by many other components
  // So it's important to use a hotkey scope to avoid conflicts
  useScopedHotkeys(
    Key.Escape,
    () => {
      onClose()
    },
    ExampleHotkeyScopes.ExampleModal,
  );

  return <div>My modal component</div>;
};
```

Det er vigtigt at bruge dette mønster, når du ikke er sikker på, at bare det at bruge en useEffect med montering/afmontering vil være nok til at undgå konflikter.

Disse konflikter kan være svære at fejlfinde, og det kan ske oftere end ikke med useEffects.

## Hvad er et genvejstast-omfang?

Et genvejstast-omfang er en streng, der repræsenterer en kontekst, hvor genvejstasterne er aktive. Det er generelt kodet som en enum.

Når du ændrer genvejstast-omfanget, vil genvejstaster, der lytter til dette omfang, blive aktiveret, og genvejstaster, der lytter til andre omfang, blive deaktiveret.

Du kan kun indstille et omfang ad gangen.

Som et eksempel er genvejstast-omfangene for hver side defineret i `PageHotkeyScope` enum:

```tsx
export enum PageHotkeyScope {
  Settings = 'settings',
  CreateWorkspace = 'create-workspace',
  SignInUp = 'sign-in-up',
  CreateProfile = 'create-profile',
  PlanRequired = 'plan-required',
  ShowPage = 'show-page',
  PersonShowPage = 'person-show-page',
  CompanyShowPage = 'company-show-page',
  CompaniesPage = 'companies-page',
  PeoplePage = 'people-page',
  OpportunitiesPage = 'opportunities-page',
  ProfilePage = 'profile-page',
  WorkspaceMemberPage = 'workspace-member-page',
  TaskPage = 'task-page',
}
```

Internt bliver det aktuelt valgte omfang gemt i en Recoil-tilstand, der deles på tværs af applikationen:

```tsx
export const currentHotkeyScopeState = createState<HotkeyScope>({
  key: 'currentHotkeyScopeState',
  defaultValue: INITIAL_HOTKEYS_SCOPE,
});
```

Men denne Recoil-tilstand bør aldrig håndteres manuelt! Vi vil se, hvordan man bruger det i næste sektion.

## Hvordan fungerer det internt?

Vi har lavet en tynd wrapper oven på [react-hotkeys-hook](https://react-hotkeys-hook.vercel.app/docs/intro), der gør det mere effektivt og undgår unødvendige gensidige rendering.

Vi oprettede også en Recoil-tilstand til at håndtere genvejstast-omfanget og gøre det tilgængeligt overalt i applikationen.