Joystick UI

Joystick UI component and controls for mobile browsers. Demo available:

Usage

import { createJoystick } from "joystick-ui";
import "joystick-ui/dist/main.css";

const { joystick, joystickControl } = createJoystick();

Customization

Prop	Type	Description
joystickClass	string	Customize joystick styles. Default min-width: 180px and width: 20vw.
thumbClass	string	Customize moving thumb styles. Default width: 36px and height: 36px.
enableTransition	boolean	TODO. Transition is enabled by default.

WebGL

const animate = () => {
  console.log(joystickControl.direction.normalize());
  requestAnimationFrame(animate);
};

animate();

Browser

joystick is a DOM element which can be rendered by any library or framework.

document.body.append(joystick);

React

return <div ref={(element) => element.append(joystick)} />;

Solid

return joystick;