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

Bundle Size

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>

Migrating from V1

The main breaking change is that the control plane is no longer square by default - if you require a square control plane on a circular joystick, you can set controlPlaneShape='square' which will give you the original behaviour.

Component Props - as described by IJoystickProps - all are optional

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
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
minDistance number Percentage 0-100 - the minimum distance to start receive IJoystickMove events 
import {JoystickShape} from "./shape.enum"; 
interface IJoystickProps {
    size?: 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;
}

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
}