A React library for easy gamepad/controller integration with real-time axes data access
npm install @greact/controllerrequestAnimationFrame for smooth polling
bash
npm install @greact/controller
`
Quick Start
`tsx
import { ControllerProvider, useController } from '@greact/controller';
function App() {
return (
);
}
function FlightSimulator() {
const { controller, axes, metadata } = useController();
return (
Status: {controller ? 'Connected' : 'Disconnected'}
{controller && (
Controller: {metadata?.id}
Throttle: {axes.throttle}
Yaw: {axes.yaw}
Pitch: {axes.pitch}
Roll: {axes.roll}
)}
);
}
`
API Reference
$3
React Context Provider that manages controller state and polling.
`tsx
import { ControllerProvider } from '@greact/controller';
{/ Your app components /}
`
$3
Hook that returns controller data and axes values.
Returns:
`typescript
{
controller: ControllerData | null;
axes: AxesData;
metadata: ControllerMetadata | null;
}
`
Types:
`typescript
interface ControllerData {
id: string;
index: number;
mapping: string;
timestamp: number;
connected: boolean;
axes: number[];
}
interface AxesData {
throttle: number; // Axis 3
yaw: number; // Axis 4
pitch: number; // Axis 1
roll: number; // Axis 0
}
interface ControllerMetadata {
id: string;
mapping: string;
index: number;
}
`
Usage Examples
$3
`tsx
function ControllerStatus() {
const { controller } = useController();
return (
{controller ? (
ā
{controller.id} connected
) : (
ā No controller connected
)}
);
}
`
$3
`tsx
function FlightControls() {
const { axes } = useController();
return (
Throttle: {(axes.throttle * 100).toFixed(1)}%
Yaw: {(axes.yaw * 100).toFixed(1)}%
Pitch: {(axes.pitch * 100).toFixed(1)}%
Roll: {(axes.roll * 100).toFixed(1)}%
);
}
`
$3
`tsx
function ControllerInfo() {
const { metadata } = useController();
if (!metadata) return No controller connected;
return (
ID: {metadata.id}
Mapping: {metadata.mapping}
Index: {metadata.index}
);
}
``