# @ishikawa-masashi/react-joystick

> [![Build Status](https://travis-ci.org/elmarti/react-joystick-component.svg?branch=master)](https://travis-ci.org/elmarti/react-joystick-component)

Latest version **0.0.9** (published 2022-01-15) · 0 weekly downloads

## Install

```sh
npm install @ishikawa-masashi/react-joystick
pnpm add @ishikawa-masashi/react-joystick
yarn add @ishikawa-masashi/react-joystick
bun add @ishikawa-masashi/react-joystick
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2022-01-15 |
| First published | 2022-01-14 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 49.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | ishikawa-masashi |

## Links

- npm: https://www.npmjs.com/package/@ishikawa-masashi/react-joystick
- Repository: https://github.com/thzt/test-vite-lib
- Homepage: https://github.com/thzt/test-vite-lib#readme
- Issues: https://github.com/thzt/test-vite-lib/issues
- npm.io page: https://npm.io/package/@ishikawa-masashi/react-joystick

## Recent versions

- 0.0.9 (latest) — 2022-01-15
- 0.0.8 — 2022-01-14
- 0.0.7 — 2022-01-14
- 0.0.6 — 2022-01-14
- 0.0.5 — 2022-01-14
- 0.0.4 — 2022-01-14
- 0.0.3 — 2022-01-14
- 0.0.2 — 2022-01-14
- 0.0.1 — 2022-01-14

## README

## React Joystick Component

[![Build Status](https://travis-ci.org/elmarti/react-joystick-component.svg?branch=master)](https://travis-ci.org/elmarti/react-joystick-component)

[Click here to see examples](https://elmarti.github.io/react-joystick-component/)

```
npm i react-joystick-component --save
```

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


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

Component Props - as described by IJoystickProps

| 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](https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf) rate of the move callback |
|  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  |

```TypeScript
interface IJoystickProps {
    size?: number;
    baseColor?: string;
    stickColor?: string;
    disabled?: boolean;
    throttle?: number;
    move?: (event: IJoystickUpdateEvent) => void;
    stop?: (event: IJoystickUpdateEvent) => void;
    start?: (event: IJoystickUpdateEvent) => void;
}
```

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

export interface IJoystickUpdateEvent {
    type: "move" | "stop" | "start";
    x: number | null;
    y: number | null;
    direction: JoystickDirection | null;
}
```

---
_Source: https://npm.io/package/@ishikawa-masashi/react-joystick · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._