The KeyPress
component allows you to render children elements based on a specific key combination being pressed.
<KeyPress keyCombo="Ctrl+d">
<div>You hit control + d. GREAT JOB!!!!</div>
</KeyPress>
keyCombo
(string, required): The key combination to listen for. Keys should be separated by a+
(e.g.,Ctrl+Alt+a
).children
(ReactNode, optional): The elements to render when the key combination is pressed.onPress
(function, optional): A callback function to execute when the key combination is pressed.
<KeyPress keyCombo="Ctrl+d" onPress={() => alert('Control + D pressed')} />
- The
keyCombo
prop is case-insensitive. - Special keys like
Ctrl
,Alt
,Shift
, andMeta
are normalized tocontrol
,alt
,shift
, andmeta
respectively.