useModifierKeys
Know which modifier keys (
alt, ctrl, meta, shift) are held right now from one shared, document-wide tracker: useModifierKeys() re-renders only when one changes, and getModifierKeys() reads the state inside an event or gesture handler without a render. Window blur releases everything. Web only; all false on native.useModifierKeys() returns { alt, ctrl, meta, shift } and re-renders only when one of them changes — here, to show what a drag would do. In a gesture handler, read getModifierKeys() instead: no render at all.Loading demo…
import { Block, KeyCap, Row, Text, useModifierKeys } from '@plocks/ui';
export function Demo() {
const { alt, ctrl, meta, shift } = useModifierKeys();
const action = alt ? 'Copy' : shift ? 'Add to selection' : 'Move';
return (
<Block align="flex-start" gap="sm">
<Row gap="xs" wrap="wrap">
<KeyCap size="sm" pressed={shift}>⇧ Shift</KeyCap>
<KeyCap size="sm" pressed={alt}>⌥ Alt</KeyCap>
<KeyCap size="sm" pressed={ctrl}>⌃ Ctrl</KeyCap>
<KeyCap size="sm" pressed={meta}>⌘ Meta</KeyCap>
</Row>
<Text size="sm">Dropping now would: {action}</Text>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources