warp-browser-gamepad

Easy way to use the browser native gamepad API. Please check the CanIuse website before using this library

Installation

Install dependencies:

$ npm install warp-browser-gamepad --save

How to use

import Gamepad from 'warp-browser-gamepad';
// or
// const Gamepad = require('warp-browser-gamepad').default;

const onButtonChangeHandler = (button: GamepadButton, gamepad: Gamepad) => console.log(button, gamepad);
const onAxesChangeHandler = (axes: number[], gamepad: Gamepad) => console.log(axes, gamepad);
const onConnectionChangeHandler = (gamepad: Gamepad) => console.log(gamepad);

const myGamepadInstance = new Gamepad(
  onButtonChangeHandler,
  onAxesChangeHandler,
  onConnectionChangeHandler,
  Gamepad.Layouts.XBOX_ONE
);

// Starts the event listener
myGamepadInstance.start();

// Stops the event listener
myGamepadInstance.stop();

// Returns all connected gamepads
myGamepadInstance.getActiveGamepads()

Available Layouts

const DEFAULT = [
  "BUTTON_0",
  "BUTTON_1",
  "BUTTON_2",
  "BUTTON_3",
  "BUTTON_4",
  "BUTTON_5",
  "BUTTON_6",
  "BUTTON_7",
  "BUTTON_8",
  "BUTTON_9",
  "BUTTON_10",
  "BUTTON_11",
  "BUTTON_12",
  "BUTTON_13",
  "BUTTON_14",
  "BUTTON_15",
  "BUTTON_16"
];
const XBOX_ONE = [
  "A",
  "B",
  "X",
  "Y",
  "LB",
  "RB",
  "LT",
  "RT",
  "Start",
  "Back",
  "LS",
  "RS",
  "DPadUp",
  "DPadDown",
  "DPadLeft",
  "DPadRight"
];

Tips

Are you having problems to make your MacOS detect the Xbox controller? Check this: 360Controller, it works for X360 and XONE

Development

Run the example app at http://localhost:3000.

Open the browser DevTools and check the console output for debugging.

$ npm start

Run tests and watch for code changes using jest:

$ npm test

Lint src and test files:

$ npm run lint