getEventKey() — react Function Reference

Architecture documentation for the getEventKey() function in SyntheticEvent.js from the react codebase.

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ getEventKey() — react Function Reference

Dependency Diagram

graph TD
  ea12f2cb_e0f5_eb4c_1b1b_a381af470492["getEventKey()"]
  9c3d71d9_41af_c5e7_cd35_d25bbf6cf606["SyntheticEvent.js"]
  ea12f2cb_e0f5_eb4c_1b1b_a381af470492 -->|defined in| 9c3d71d9_41af_c5e7_cd35_d25bbf6cf606
  e465f930_ff45_eb24_125c_d4942d1fa85f["getEventCharCode()"]
  ea12f2cb_e0f5_eb4c_1b1b_a381af470492 -->|calls| e465f930_ff45_eb24_125c_d4942d1fa85f
  style ea12f2cb_e0f5_eb4c_1b1b_a381af470492 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/events/SyntheticEvent.js lines 376–409

function getEventKey(nativeEvent: {[propName: string]: mixed}) {
  if (nativeEvent.key) {
    // Normalize inconsistent values reported by browsers due to
    // implementations of a working draft specification.

    // FireFox implements `key` but returns `MozPrintableKey` for all
    // printable characters (normalized to `Unidentified`), ignore it.
    const key =
      // $FlowFixMe[invalid-computed-prop] unable to index with a `mixed` value
      normalizeKey[nativeEvent.key] || nativeEvent.key;
    if (key !== 'Unidentified') {
      return key;
    }
  }

  // Browser does not implement `key`, polyfill as much of it as we can.
  if (nativeEvent.type === 'keypress') {
    const charCode = getEventCharCode(
      // $FlowFixMe[incompatible-call] unable to narrow to `KeyboardEvent`
      nativeEvent,
    );

    // The enter-key is technically both printable and non-printable and can
    // thus be captured by `keypress`, no other non-printable key should.
    return charCode === 13 ? 'Enter' : String.fromCharCode(charCode);
  }
  if (nativeEvent.type === 'keydown' || nativeEvent.type === 'keyup') {
    // While user keyboard layout determines the actual meaning of each
    // `keyCode` value, almost all function keys have a universal value.
    // $FlowFixMe[invalid-computed-prop] unable to index with a `mixed` value
    return translateToKey[nativeEvent.keyCode] || 'Unidentified';
  }
  return '';
}