react-joystick-component

A snazzy React joystick component

Usage no npm install needed!

<script type="module">
  import reactJoystickComponent from 'https://cdn.skypack.dev/react-joystick-component';
</script>

README

React Joystick Component

Build Status

Click here to see examples

import { Joystick } from 'react-joystick-component';
<Joystick size={100} baseColor="red" stickColor="blue" move={handleMove} stop={handleStop}></Joystick>

Component Props - as described by IJoystickProps

Prop Type Description
size number The size in px of the Joystick base
baseColor string The color of the Joystick base
stickColor string The color of the Stick
throttle number The throttling rate of the move callback
move Function Callback fired on every mouse move, not throttled unless a throttling rate is provided as above
stop Function Callback fired when the user releases the joystick
start Function Callback fired when the user starts moving the Joystick
disabled Boolean When true, block any usage of the Joystick. This will also apply the joystick-disabled and joystick-base-disabled classNames
interface IJoystickProps {
    size?: number;
    baseColor?: string;
    stickColor?: string;
    disabled?: boolean;
    throttle?: number;
    move?: (event: IJoystickUpdateEvent) => void;
    stop?: (event: IJoystickUpdateEvent) => void;
    start?: (event: IJoystickUpdateEvent) => void;
}
type JoystickDirection = "FORWARD" | "RIGHT" | "LEFT" | "BACKWARD";

export interface IJoystickUpdateEvent {
    type: "move" | "stop" | "start";
    x: number | null;
    y: number | null;
    direction: JoystickDirection | null;
}