Keyboard Shortcut

A small set of UI components for rendering Keyboard Shortcuts

Installation

yarn add @procore/labs-keyboard-shortcut

Requirements

Peer dependencies

• react >16.8
• core-react >11.0
• styled-components >5.1

Translations

• Include these translations in your bundle from Procore views.generic.keyboard_shortcuts.*

Providers

To use KeyCap or KeyboardShortcutTranslation components, you must wrap this component (root level of your app) in these providers

• I18nProvider from @procore/core-react

import { I18nProvider } from '@procore/core-react';

<I18nProvider I18n={I18n}>
  <App/>
</I18nProvider>

Full Example

import { I18nProvider } from '@procore/core-react';
import { KeyCap, KeyName } from '@procore/labs-keyboard-shortcut';

const App = () => (
  <I18nProvider I18n={I18n}>
    <KeyCap keyName="Shift" variant="dark" />
  </I18nProvider>
);

Accessibility

To add proper aria attributes, wrap your target element (the ui element that would be "clicked") when then shortcut is activated in KeyboardShortcutTargetWrapper.

<KeyboardShortcutTargetWrapper keyNames={['Meta', 'Plus']}>
  <Button>Zoom In</Button>
</KeyboardShortcutTargetWrapper>