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