@procore/labs-keyboard-shortcut
keyboard shortcut ui
Last updated a month ago by dancingshell .
SEE LICENSE IN LICENSE · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @procore/labs-keyboard-shortcut 
SYNC missed versions from official npm registry.

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 >8.20
  • styled-components >5.1
  • @procore/labs-jsskit >3.0

Translations

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

Providers

To use KeyboardShortcut 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={window.I18n}>
  <App/>
</I18nProvider>
  • ThemeProvider from @procore/core-react
import { ThemeProvider } from 'styled-components';
import { createTheme } from '@procore/labs-jsskit';

<ThemeProvider theme={createTheme()}>
  <App/>
</ThemeProvider>

Full Example

import { ThemeProvider } from 'styled-components';
import { I18nProvider } from '@procore/core-react';
import { createTheme } from '@procore/labs-jsskit';
import { KeyboardShortcut, KeyName } from '@procore/labs-keyboard-shortcut';

const App = () => (
  <I18nProvider I18n={window.I18n}>
    <ThemeProvider theme={createTheme()}>
      <KeyboardShortcut keyName="Shift" variant="dark" />
    </ThemeProvider>
  </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>

Current Tags

  • 0.1.2-alpha.8138                                ...           canary (a month ago)
  • 0.1.1                                ...           latest (a month ago)

6 Versions

  • 0.1.1                                ...           a month ago
  • 0.1.2-alpha.8138                                ...           a month ago
  • 0.1.2-alpha.8134                                ...           a month ago
  • 0.1.2-alpha.8032                                ...           a month ago
  • 0.1.2-beta.8032                                ...           a month ago
  • 0.1.0-alpha-initial-version                                ...           2 months ago

Copyright 2014 - 2016 © taobao.org |