TypeScript icon, indicating that this package has built-in type declarations

6.2.1 • Public • Published

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>

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 

Package Sidebar


npm i react-joystick-component

Weekly Downloads






Unpacked Size

71.1 kB

Total Files


Last publish


  • elmarti