js-keycodes

Key-Codes as constants and helper functions to identify characters

Installation

| NPM | Yarn | | ---------------------- | ---------------------- | | npm i -S @famence/js-keycodes | yarn add @famence/js-keycodes |

Available Key Codes Constants

import { keyCodes } from '@famence/js-keycodes';

keyCodes.ENTER === 13;
// -> true
keyCodes.F12 === 123;
// -> true

window.addEventListener('keyup', (e) => {
  if (e.keyCode === keyCodes.ENTER) {
    console.log('ENTER was pressed');
  }
});

| Constant Name | Key Code value | | ------------- | -------------- | | ENTER | 13 | | ESC | 27 | | BACKSPACE | 8 | | TAB | 9 | | SHIFT | 16 | | CTRL | 17 | | ALT | 18 | | SPACE | 32 | | PAUSE | 19 | | PAGE_UP | 33 | | PAGE_DOWN | 34 | | END | 35 | | HOME | 36 | | LEFT | 37 | | UP | 38 | | RIGHT | 39 | | DOWN | 40 | | INSERT | 45 | | DELETE | 46 | | F1 | 112 | | F2 | 113 | | F3 | 114 | | F4 | 115 | | F5 | 116 | | F6 | 117 | | F7 | 118 | | F8 | 119 | | F9 | 120 | | F10 | 121 | | F11 | 122 | | F12 | 123 | | DOT | 190 | | DOT_NUMPAD | 110 | | COMA | 188 | | COMA_NUMPAD | 0 | | A | 65 | | B | 66 | | C | 67 | | D | 68 | | E | 69 | | F | 70 | | G | 71 | | H | 72 | | I | 73 | | J | 74 | | K | 75 | | L | 76 | | M | 77 | | N | 78 | | O | 79 | | P | 80 | | Q | 81 | | R | 82 | | S | 83 | | T | 84 | | U | 85 | | V | 86 | | W | 87 | | X | 88 | | Y | 89 | | Z | 90 | | ZERO | 48 | | ONE | 49 | | TWO | 50 | | THREE | 51 | | FOUR | 52 | | FIVE | 53 | | SIX | 54 | | SEVEN | 55 | | EIGHT | 56 | | NINE | 57 | | ZERO_NUMPAD | 96 | | ONE_NUMPAD | 97 | | TWO_NUMPAD | 98 | | THREE_NUMPAD | 99 | | FOUR_NUMPAD | 100 | | FIVE_NUMPAD | 101 | | SIX_NUMPAD | 102 | | SEVEN_NUMPAD | 103 | | EIGHT_NUMPAD | 104 | | NINE_NUMPAD | 105 |

Helper functions

import * as KeyCodes from '@famence/js-keycodes';

Or individual functions:

import { isLetter, isNumber } from '@famence/js-keycodes';

Verify if a keyCode is a letter

import { isLetter, keyCodeToString } from '@famence/js-keycodes';

window.addEventListener('keyup', (e) => {
  if (isLetter(e.keyCode)) {
    const char = keyCodeToString(e.keyCode);
    console.log(`"${char}" was pressed`);
  }
});

Verify if ENTER is pressed on an event

import { keyCodes } from '@famence/js-keycodes';

const handleAnEvent = (event) => {
  if (event.keyCode === keyCodes.ENTER) {
    // Do your stuff here.
  }
};

KeyCodes.isNumber()

Return true if the keyCode is a number from 0 to 9.

KeyCodes.isLetter()

Return true if the keyCode is a letter from A to Z.

KeyCodes.isNavigation()

Return true if the keyCode represents an Arrow key ⬆️, ⬇️, ⬅️ or ➡️.

KeyCodes.isWhitespace()

Return true if the keyCode represent ENTER, SPACE or TAB

KeyCodes.isF1ToF12()

Return true if the keyCode represent any of the F buttons from F1 to F12

KeyCodes.keyCodeToString()

Return a string representation of the keyCode.

import { keyCodeToString } from '@famence/js-keycodes';

const myLetter = keyCodeToString(90);
// -> 'Z'

const myNumber = keyCodeToString(50);
//  '2'

KeyCodes.getKeyNameFromKeyCode()

Return a string representation based on the programmatic name of the keyCode

import { getKeyNameFromKeyCode } from '@famence/js-keycodes';

const myLetter = getKeyNameFromKeyCode(90);
// -> 'Z'

const myNumber = getKeyNameFromKeyCode(50);
// -> 'TWO'

const myKey = getKeyNameFromKeyCode(13);
// -> 'ENTER'

const myF = getKeyNameFromKeyCode(121);
// -> 'F10'