useGamepadAxis

Reactive number in [-1, 1] for a single stick axis. The value is raw — apply your own deadzone where you need one (Math.abs(v) < threshold ? 0 : v). For analog triggers use useGamepadTrigger. Part of pota/use/gamepad.

Arguments

Argument	Type	Description
axisIndex	number	Axis index (e.g. 0 left-X, 1 left-Y).
gamepadIndex	number	Gamepad index. Default is 0.

Returns: () => number — a reader function you can pass straight into JSX as a reactive child or value.

Examples

Move a dot with the left stick

Derives an X/Y position from the two left-stick axes and feeds it into an inline style. A small deadzone keeps the dot still when the stick is centered. The reader functions go straight into the reactive left / top style wrappers.

import { render } from 'pota'
import { useGamepadAxis } from 'pota/use/gamepad'

const deadzone = v => (Math.abs(v) < 0.15 ? 0 : v)

function App() {
	const x = useGamepadAxis(0)
	const y = useGamepadAxis(1)

	return (
		<div
			style={{
				position: 'absolute',
				width: '20px',
				height: '20px',
				'border-radius': '50%',
				background: 'crimson',
				left: () => 100 + deadzone(x()) * 100 + 'px',
				top: () => 100 + deadzone(y()) * 100 + 'px',
			}}
		/>
	)
}

render(App)