react-joystick-component

React Joystick Component

Click here to see examples

npm i react-joystick-component --save
yarn add react-joystick-component

import { Joystick } from 'react-joystick-component';

<Joystick size={100} sticky={true} baseColor="red" stickColor="blue" move={handleMove} stop={handleStop}></Joystick>

Component Props - as described by IJoystickProps - all are optional

Prop	Type	Description
size	number	The size in px of the Joystick base
stickSize	number	The size in px of the Joystick stick (if unspecified, joystick size is relative to the size value
baseColor	string	The color of the Joystick base
stickColor	string	The color of the Stick
throttle	number	The throttling rate of the move callback
sticky	Boolean	Should the joystick stay where it is when the interaction ends
stickImage	string	The image to be shown for the joystick
baseImage	string	The image to be shown for the pad
followCursor	Boolean	Make the stick follow the cursor position
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
stickShape	JoystickShape	The shape of the joystick default = circle
baseShape	JoystickShape	The shape of the joystick default = circle
controlPlaneShape	JoystickShape	Override the default shape behaviour of the control plane - circle, square, axisX, axisY
minDistance	number	Percentage 0-100 - the minimum distance to start receive IJoystickMove events
pos	{x: number, y: number}	Override the joystick position (doesn't work if the user is interacting. You can use disabled to force this)

import {JoystickShape} from "./shape.enum"; 
interface IJoystickProps {
    size?: number;
    stickSize?: number;
    baseColor?: string;
    stickColor?: string;
    disabled?: boolean;
    throttle?: number;
    sticky?: boolean;
    stickImage?: string;
    baseImage?: string;
    followCursor?: boolean;
    move?: (event: IJoystickUpdateEvent) => void;
    stop?: (event: IJoystickUpdateEvent) => void;
    start?: (event: IJoystickUpdateEvent) => void;
    baseShape?: JoystickShape;
    stickShape?: JoystickShape;
    controlPlaneShape?: JoystickShape;
    minDistance?: number;
    pos: {x: number, y: number}
}

type JoystickDirection = "FORWARD" | "RIGHT" | "LEFT" | "BACKWARD";

export interface IJoystickUpdateEvent {
    type: "move" | "stop" | "start";
    x: number | null;
    y: number | null;
    direction: JoystickDirection | null;
    distance: number; // Percentile 0-100% of joystick 
}