Easy Mobile Joystick For React

How to start

create your React app or open him and paste to the terminal npm i react-mobile-joystick

Get Code

Add lines to your React Component:

• import { Nipple } from './Nipple';
• add to render or return <Nipple side='left' onChange={(event) => console.log(event.x, event.y)} /> where onChange={(event) => console.log(event.x, event.y)} returns our coordinates moves on joystick in console

Props

Side(string) - right, (left - default)

Pay attention!

It is only for mobile devices because work with touchmove events! Of course it is simply to change.

To work with our joystick you may work with onChange={(event) Don`t forget use setTimeout, webApplicationFrame or any function who rerender your Component with time to correctly movement

Easy code to show change at screen

import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import { Nipple } from './Nipple';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Nipple side='right' onChange={(event) => console.log(event.x, event.y)} />
  </React.StrictMode>
);
reportWebVitals();