# react-ts-gamepads

> Library that enables users to consume Gamepad API inside React

Latest version **1.0.8** (published 2025-05-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-ts-gamepads
pnpm add react-ts-gamepads
yarn add react-ts-gamepads
bun add react-ts-gamepads
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2025-05-11 |
| First published | 2023-01-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18 |
| Dependencies | 0 |
| Unpacked size | 41.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Author | nogiszd |
| Maintainers | nogiszd |

## Links

- npm: https://www.npmjs.com/package/react-ts-gamepads
- Repository: https://github.com/nogiszd/react-ts-gamepads
- npm.io page: https://npm.io/package/react-ts-gamepads

## Recent versions

- 1.0.8 (latest) — 2025-05-11
- 1.0.7 — 2025-04-13
- 1.0.6 — 2024-06-09
- 1.0.5 — 2023-01-26
- 1.0.4 — 2023-01-26
- 1.0.3 — 2023-01-23
- 1.0.2 — 2023-01-22
- 1.0.1 — 2023-01-22
- 1.0.0 — 2023-01-22

## README

# react-ts-gamepads 🎮➡️⚛️

> Library to support Gamepad API in modern React ⚛️

This is a maintained fork of [react-gamepads](https://github.com/whoisryosuke/react-gamepads) with detailed TypeScript types and updated libraries.

<div align="center">

![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB) ![Typescript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white) ![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge) ![npm](https://img.shields.io/npm/dw/react-ts-gamepads?color=red&logo=npm&style=for-the-badge)

</div>

## 🛫 Getting started

```bash
npm i react-ts-gamepads
```

There are two approaches: [hook](#usegamepads-hook) and [context](#gamepadsprovider-context)

### `useGamepads` hook

With this hook you can **retrieve** all gamepad inputs. This allows you to have a component "react" to gameplay input as it's received.

In this example, we take the input and set the component's state to it. This lets you use the state inside the component and have it change.

```jsx
import { useState } from 'react';
import { useGamepads, GamepadRef } from 'react-ts-gamepads';

const App = () => {
  const [gamepads, setGamepads] = useState<GamepadRef>({});
  useGamepads(gamepads => setGamepads(gamepads));

  return <div>{gamepads[0].buttons[4].pressed}</div>;
};

export default App;
```

> Difference between `react-gamepads` and `react-ts-gamepads` are that this library is **strongly typed**, although original library is also written in TypeScript.
> You can import provided types and use them in `useState` to avoid type infering.

### `<GamepadsProvider>` context

With context, you can have parts (or the entire app) to subscribe to the state changes, in that case _gamepad state_.

1. Make an consumer component with the usage of `useContext` hook.

```jsx
import { useContext } from 'react';
import { GamepadsContext } from 'react-ts-gamepads';

const Example = () => {
  const { gamepads } = useContext(GamepadsContext);

  return <div>{gamepads[0].buttons[4].pressed}</div>;
};

export default Example;
```

2. Wrap your `App.tsx` (or another main file) in the Provider and import your newly made component

```jsx
import { GamepadsProvider } from 'react-ts-gamepads';
import Example from './components/Example';

const App = () => {
  return (
    <GamepadsProvider>
      <Example />
    </GamepadsProvider>
  );
};
```

It is your choice which approach you will choose, or which fits your usage better.

## 📚 Credits

- [react-gamepads](https://github.com/whoisryosuke/react-gamepads)
- [Gamepad API - MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API)

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