React-boop NPM

react-boop

A flexible virtual joystick component for React, built with TypeScript for mobile devices📱 Simple integration with smooth and intuitive controls for touchscreen environments.

Live Demo

Try the joystick in action on a mobile device:

👉 Live Demo (Try it on your Phone or Tablet)

Designed to work only on mobile and touchscreen devices. It will not respond to mouse or desktop inputs.

Features

Exclusively for Mobile Devices – Only responds to touch events (mobile and tablet devices).
Written in TypeScript, compatible with both TypeScript and JavaScript React projects
Fully customizable size and styles.

Installation

npm install react-boop

Usage

import { VirtualJoystick } from "react-boop";

export default function App() {
  return (
    <VirtualJoystick
      size={150}
      onChange={(vector) => console.log(vector)}
      className="custom-joystick"
      style={{ backgroundColor: "#4A90E2" }}
    />
  );
}

Props

Prop	Type	Default	Description
`onChange`	`(vector: {x: number, y: number}) => void`	Required	Callback function for joystick movement.
`className`	`string`	`""`	Custom CSS classes for styling.
`style`	`React.CSSProperties`	`{}`	Inline styling for the joystick.
`size`	`number`	`96`	Size of the joystick in pixels.