react-gamepad
Version:
A Gamepad handler as a React component
173 lines (124 loc) • 4.83 kB
Markdown
# react-gamepad
A Gamepad handler as a React component
```bash
npm install react-gamepad --save
```
This component provides handlers for gamepad events, to use directly in your React components
## Usage example
```js
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}
/>
)
}
}
```
## API
### Props
```js
<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={() => {}},
/>
```
#### gamepadIndex
The index of the gamepad to use, from 0 to 4
**Default: 0**
#### stickThreshold
Threshold above which `onUp`, `onDown`,`onLeft`,`onRight` are triggered for the left stick
**Default: 0.75**
#### deadZone
Threshold below which the axis values will be rounded to `0.0`
**Default: 0.08**
#### layout
Layout to use, from `Gamepad.layouts`. For now, only `Gamepad.layouts.XBOX` exists
**Default: Gamepad.layouts.XBOX**
#### onConnect
`onConnect(gamepadIndex: Number)` triggered when the gamepad connects. Will be triggered at least once after the `Gamepad` component is mounted.
#### onDisconnect
`onDisconnect(gamepadIndex: Number)` triggered when the gamepad disconnects.
#### onButtonDown
`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
`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
`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
`onAxisChange(axisName: String, value: Number, previousValue: Number)` triggered when an axis is changed. `axisName` is one of `LeftStickX`, `LeftStickY`, `RightStickX`, `RightStickY`, `LeftTrigger`, `RightTrigger`
#### onA
`onA()` triggered when the `A` button is pressed.
#### onB
`onB()` triggered when the `B` button is pressed.
#### onX
`onX()` triggered when the `X` button is pressed.
#### onY
`onY()` triggered when the `Y` button is pressed.
#### onLT
`onLT()` triggered when the `LT` button is pressed.
#### onRT
`onRT()` triggered when the `RT` button is pressed.
#### onLB
`onLB()` triggered when the `LB` button is pressed.
#### onRB
`onRB()` triggered when the `RB` button is pressed.
#### onLS
`onLS()` triggered when the `LS` button is pressed.
#### onRS
`onRS()` triggered when the `RS` button is pressed.
#### onUp
`onUp()` triggered when the `D Pad Up` button is pressed or the Left Stick is pushed up (above `stickThreshold`).
#### onDown
`onDown()` triggered when the `D Pad Down` button is pressed or the Left Stick is pushed down (above `stickThreshold`).
#### onLeft
`onLeft()` triggered when the `D Pad Left` button is pressed or the Left Stick is pushed left (above `stickThreshold`).
#### onRight
`onRight()` triggered when the `D Pad Right` button is pressed or the Left Stick is pushed right (above `stickThreshold`).