├── README.md └── useGamepad.jsx /README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | The useGamepad React Hook is designed for seamless integration of game controller support in 3 | React applications. It provides an easy-to-use API to access gamepad inputs like buttons and 4 | joysticks, enhancing the interactivity of your web app. 5 | 6 | ## Installation Instructions 7 | 1. Add the useGamepad.jsx file to your project's components directory. 8 | 2. Import the useGamepad hook in your React component using ES6 syntax: 9 | `import { useGamepad } from './useGamepad';` 10 | ## Usage Guide 11 | In your React component, use the hook as follows: 12 | ``` 13 | const { buttonA, buttonB, buttonX, buttonY, joystick, joystickRight, LB, RB, RT, LT, up, down, left, right, start, select } = useGamepad(); 14 | ``` 15 | This will give you access to the gamepad's buttons and joysticks. 16 | You can as well choose to get only the buttons you want. 17 | 18 | ## API Reference 19 | The useGamepad hook provides the following properties: 20 | - buttonA, buttonB, buttonX, buttonY: Boolean states of the A, B, X, Y buttons. 21 | - joystick, joystickRight: Object states of the left and right joysticks. 22 | - LB, RB, RT, LT: States of the left and right bumpers and triggers. 23 | - up, down, left, right: States of the directional pad. 24 | useGamepad React Hook Documentation 25 | - start, select: States of the start and select buttons. 26 | ## Example 27 | Here is a simple example of using the useGamepad hook in a component: 28 | ``` 29 | import React from 'react'; 30 | import { useGamepad } from './useGamepad'; 31 | function GameComponent() { 32 | const { buttonA } = useGamepad(); 33 | return (
{buttonA ? 'Button A Pressed' : 'Press Button A'}
); 34 | } 35 | export default GameComponent; 36 | ``` 37 | ## FAQs 38 | Q: How do I handle multiple gamepads? 39 | A: The hook is designed to handle multiple gamepads. You can access them using array indexes. 40 | Q: Is this hook compatible with all browsers? 41 | A: The hook uses the standard Gamepad API, which is widely supported in modern browsers. 42 | ## Contact Information 43 | For support or contributions, please visit the project repository on GitHub or contact the maintainers. -------------------------------------------------------------------------------- /useGamepad.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | 3 | export const useGamepad = () => { 4 | const [gamepadInfo, setGamepadInfo] = useState({ connected: false, buttonA: false, buttonB :false, buttonX: false, buttonY:false, joystick: [0, 0], joystickRight : [0,0], RB: false, LB: false, RT: false, LT: false, start: false, select: false, up: false, down: false, left: false, right: false}); 5 | 6 | // Function to update gamepad state 7 | const updateGamepadState = () => { 8 | const gamepads = navigator.getGamepads ? navigator.getGamepads() : []; 9 | const gamepad = gamepads[0]; // Assuming the first gamepad 10 | 11 | if (gamepad) { 12 | const newGamepadInfo = { 13 | connected: true, 14 | buttonA: gamepad.buttons[0].pressed, 15 | buttonB: gamepad.buttons[1].pressed, 16 | buttonX: gamepad.buttons[2].pressed, 17 | buttonY: gamepad.buttons[3].pressed, 18 | joystickRight: [gamepad.axes[2], gamepad.axes[3]], 19 | LT: gamepad.buttons[6].pressed, 20 | RT: gamepad.buttons[7].pressed, 21 | LB: gamepad.buttons[4].pressed, 22 | RB: gamepad.buttons[5].pressed, 23 | 24 | start: gamepad.buttons[9].pressed, 25 | select: gamepad.buttons[8].pressed, 26 | up: gamepad.buttons[12].pressed, 27 | down: gamepad.buttons[13].pressed, 28 | left: gamepad.buttons[14].pressed, 29 | right: gamepad.buttons[15].pressed, 30 | joystick: [gamepad.axes[0], gamepad.axes[1]] 31 | }; 32 | 33 | // Update state only if there's a change 34 | if (JSON.stringify(newGamepadInfo) !== JSON.stringify(gamepadInfo)) { 35 | setGamepadInfo(newGamepadInfo); 36 | } 37 | } else { 38 | if (gamepadInfo.connected) { 39 | setGamepadInfo({ connected: false, buttonA: false, buttonB :false, buttonX: false, buttonY:false, joystick: [0, 0], joystickRight : [0,0], RB: false, LB: false, RT: false, LT: false, start: false, select: false, up: false, down: false, left: false, right: false}); 40 | } 41 | } 42 | }; 43 | 44 | useEffect(() => { 45 | const gamepadConnected = () => { 46 | console.log('Gamepad connected!'); 47 | updateGamepadState(); 48 | }; 49 | 50 | const gamepadDisconnected = () => { 51 | console.log('Gamepad disconnected!'); 52 | setGamepadInfo({ connected : false, buttonA: false, buttonB :false, buttonX: false, buttonY:false, joystick: [0, 0], joystickRight : [0,0], RB: false, LB: false, RT: false, LT: false, start: false, select: false, up: false, down: false, left: false, right: false}); 53 | }; 54 | 55 | window.addEventListener('gamepadconnected', gamepadConnected); 56 | window.addEventListener('gamepaddisconnected', gamepadDisconnected); 57 | 58 | const interval = setInterval(updateGamepadState, 100); 59 | 60 | return () => { 61 | window.removeEventListener('gamepadconnected', gamepadConnected); 62 | window.removeEventListener('gamepaddisconnected', gamepadDisconnected); 63 | clearInterval(interval); 64 | }; 65 | }, [gamepadInfo]); 66 | 67 | return gamepadInfo; 68 | }; --------------------------------------------------------------------------------