@ishikawa-masashi/glsim

React Joystick Component

Click here to see examples

npm i react-joystick-component --save

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;
}