A Gamepad handler as a React component

npm install react-gamepad --save

This component provides handlers for gamepad events, to use directly in your React components

import Gamepad from 'react-gamepad'

class App extends Component {
  connectHandler(gamepadIndex) {
    console.log(`Gamepad ${gamepadIndex} connected !`)
  }

  disconnectHandler(gamepadIndex) {
    console.log(`Gamepad ${gamepadIndex} disconnected !`)
  }

  buttonChangeHandler(buttonName, down) {
    console.log(buttonName, down)
  }

  axisChangeHandler(axisName, value, previousValue) {
    console.log(axisName, value)
  }

  buttonDownHandler(buttonName) {
    console.log(buttonName, 'down')
  }

  buttonUpHandler(buttonName) {
    console.log(buttonName, 'up')
  }

  render() {
    return (
      <Gamepad
        onConnect={this.connectHandler}
        onDisconnect={this.disconnectHandler}

        onButtonChange={this.buttonChangeHandler}
        onAxisChange={this.axisChangeHandler}
      />
    )
  }
}

    <Gamepad
      gamepadIndex={Number}
      stickThreshold={Number}
      deadZone={Number}
      layout={Object}

      onConnect={(gamepadIndex) => {}}
      onDisconnect={(gamepadIndex) => {}}

      onButtonDown={(buttonName) => {}},
      onButtonUp={(buttonName) => {}},
      onButtonChange={(buttonName, pressed) => {}},
      onAxisChange={(axisName, value, previousValue) => {}},

      onA={() => {}},
      onB={() => {}},
      onX={() => {}},
      onY={() => {}},

      onStart={() => {}},
      onBack={() => {}},

      onLT={() => {}},
      onRT={() => {}},

      onLB={() => {}},
      onRB={() => {}},

      onLS={() => {}},
      onRS={() => {}},

      onUp={() => {}},
      onDown={() => {}},
      onLeft={() => {}},
      onRight={() => {}},
    />

The index of the gamepad to use, from 0 to 4 Default: 0

Threshold above which onUp, onDown,onLeft,onRight are triggered for the left stick Default: 0.75

Threshold below which the axis values will be rounded to 0.0 Default: 0.08

Layout to use, from Gamepad.layouts. For now, only Gamepad.layouts.XBOX exists Default: Gamepad.layouts.XBOX

onConnect(gamepadIndex: Number) triggered when the gamepad connects. Will be triggered at least once after the Gamepad component is mounted.

onDisconnect(gamepadIndex: Number) triggered when the gamepad disconnects.

onButtonDown(buttonName: String) triggered when a button is pushed. buttonName is one of A, B, X, Y, Start, Back, LT, RT, LB, RB, LS, RS, DPadUp, DPadDown, DPadLeft, DPadRight

onButtonUp(buttonName: String) triggered when a button is released. buttonName is one of A, B, X, Y, Start, Back, LT, RT, LB, RB, LS, RS, DPadUp, DPadDown, DPadLeft, DPadRight

onButtonChange(buttonName: String, pressed: Bool) triggered when a button is pushed or released. buttonName is one of A, B, X, Y, Start, Back, LT, RT, LB, RB, LS, RS, DPadUp, DPadDown, DPadLeft, DPadRight

onAxisChange(axisName: String, value: Number, previousValue: Number) triggered when an axis is changed. axisName is one of LeftStickX, LeftStickY, RightStickX, RightStickY, LeftTrigger, RightTrigger

onA() triggered when the A button is pressed.

onB() triggered when the B button is pressed.

onX() triggered when the X button is pressed.

onY() triggered when the Y button is pressed.

onLT() triggered when the LT button is pressed.

onRT() triggered when the RT button is pressed.

onLB() triggered when the LB button is pressed.

onRB() triggered when the RB button is pressed.

onLS() triggered when the LS button is pressed.

onRS() triggered when the RS button is pressed.

onUp() triggered when the D Pad Up button is pressed or the Left Stick is pushed up (above stickThreshold).

onDown() triggered when the D Pad Down button is pressed or the Left Stick is pushed down (above stickThreshold).

onLeft() triggered when the D Pad Left button is pressed or the Left Stick is pushed left (above stickThreshold).

onRight() triggered when the D Pad Right button is pressed or the Left Stick is pushed right (above stickThreshold).

Hey dude! Help me out for a couple of 🍻!