@kingstinct/react-native-keys

Cross-platform handling of key events

Usage no npm install needed!

<script type="module">
  import kingstinctReactNativeKeys from 'https://cdn.skypack.dev/@kingstinct/react-native-keys';
</script>

README

npm

@kingstinct/react-native-keys

Cross-platform handling of key events

Installation

npm install @kingstinct/react-native-keys

If using eas build add "@kingstinct/react-native-keys" to the plugins array in your expo.json.

Usage

import { addEventListener, usePressedCombo, KeyArg, ReactNativeKeysKeyCode } from "@kingstinct/react-native-keys";

// listen for a specific key combo / hotkey
const doRefetchOrSomethingElse = useCallback(() => /* ... */, []);
usePressedCombo('r', KeyArg.Control, doRefetchOrSomethingElse)

// listen for a specific key
const closeDialogOrSomethingElse = useCallback(() => /* ... */, []);
usePressedKeyCode(ReactNativeKeysKeyCode.Escape, closeDialogOrSomethingElse)

// use the event listener directly
useEffect(() => {
    const subscription = addEventListener(
        'keydown',
        (e: UnifiedKeyboardEvent) => {
            console.log('e', e.nativeEvent) // native web or ios event
            alert(e.key); // 'A'
        }
    );

    return () => {
        subscription.remove();
    };
}, []);

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT