# react-use-gamepad

> Event driven functionality for the GamepadAPI

Latest version **0.4.7** (published 2023-10-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-use-gamepad
pnpm add react-use-gamepad
yarn add react-use-gamepad
bun add react-use-gamepad
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.7 |
| Published | 2023-10-05 |
| First published | 2023-10-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 31.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Dr. Josh C. Simmons |
| Maintainers | jcpsimmons |
| Keywords | react, typescript, gamepad, hci, hmi |

## Links

- npm: https://www.npmjs.com/package/react-use-gamepad
- Repository: https://github.com/jcpsimmons/react-use-gamepad
- Homepage: https://github.com/jcpsimmons/react-use-gamepad#readme
- Issues: https://github.com/jcpsimmons/react-use-gamepad/issues
- npm.io page: https://npm.io/package/react-use-gamepad

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.4.7 (latest) — 2023-10-05
- 0.4.6 — 2023-10-05
- 0.3.6 — 2023-10-02
- 0.3.5 — 2023-10-02
- 0.3.0 — 2023-10-02
- 0.2.0 — 2023-10-02
- 0.1.0 — 2023-10-02

## README

# React useGamepad

A very simple library for using the Gamepad API. The Gamepad API expects the consumer to poll its state constantly. While this is useful for games, where you want granular control over user interaction, it doesn't make for very easy to implement HMIs.

This library takes care of the polling for you and just emits events, as if you were interacting with a mouse or keyboard in the browser.

## Installation

`yarn add react-use-gamepad`

## Use

1. Add `<GamepadEventDispatcher/>` at the root of your app. This is where the polling occurs and events are emitted.
2. Import `useGamepad()` to hook into the Gamepad's events

### Example

```tsx
const Page = () => {
  const ref = useRef<HTMLParagraphElement>(null)

  const toast = useToast({
    position: 'top',
    isClosable: true,
    duration: 1000,
  })
  useGamepad({
    onButtonDown: (buttonNumber) => {
      if (ref.current) {
        ref.current.innerHTML = `${buttonNumber}<br/>${ref.current.innerHTML}`
      }
    },
  })

  return (
    <div>
      <p ref={ref} />
      <GamepadEventDispatcher />
    </div>
  )
}

export default testpage
```

---
_Source: https://npm.io/package/react-use-gamepad · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._