{"id":16180819,"url":"https://github.com/elmarti/react-joystick-component","last_synced_at":"2025-04-06T19:12:26.943Z","repository":{"id":32801192,"uuid":"143052631","full_name":"elmarti/react-joystick-component","owner":"elmarti","description":"Tiny, multitouch, component driven joysticks in react","archived":false,"fork":false,"pushed_at":"2023-10-27T13:33:20.000Z","size":2966,"stargazers_count":92,"open_issues_count":14,"forks_count":28,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T17:11:09.311Z","etag":null,"topics":["control","javascript","joystick","joystick-control","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elmarti.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-31T18:31:44.000Z","updated_at":"2024-12-01T07:34:08.000Z","dependencies_parsed_at":"2024-06-18T14:55:50.559Z","dependency_job_id":"f15f6254-4d97-4038-8b87-3465e276cb9f","html_url":"https://github.com/elmarti/react-joystick-component","commit_stats":{"total_commits":94,"total_committers":7,"mean_commits":"13.428571428571429","dds":"0.45744680851063835","last_synced_commit":"03d8e9f3dcce81324391aac60d688d82a8346646"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elmarti%2Freact-joystick-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elmarti%2Freact-joystick-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elmarti%2Freact-joystick-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elmarti%2Freact-joystick-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elmarti","download_url":"https://codeload.github.com/elmarti/react-joystick-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247535519,"owners_count":20954576,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["control","javascript","joystick","joystick-control","react","typescript"],"created_at":"2024-10-10T06:10:09.072Z","updated_at":"2025-04-06T19:12:26.925Z","avatar_url":"https://github.com/elmarti.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## React Joystick Component\n\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/react-joystick-component?style=plastic)](https://img.shields.io/bundlephobia/minzip/react-joystick-component?style=plastic)\n\n[Click here to see examples](https://elmarti.github.io/react-joystick-component/)\n\n\n```\nnpm i react-joystick-component --save\nyarn add react-joystick-component\n```\n\n```\nimport { Joystick } from 'react-joystick-component';\n```\n\n\n```React\n\u003cJoystick size={100} sticky={true} baseColor=\"red\" stickColor=\"blue\" move={handleMove} stop={handleStop}\u003e\u003c/Joystick\u003e\n```\n\nComponent Props - as described by IJoystickProps - all are optional\n\n| Prop  | Type  | Description  |\n|---|---|---|\n| size  |  number |  The size in px of the Joystick base  |\n| stickSize  |  number |  The size in px of the Joystick stick (if unspecified, joystick size is relative to the `size` value |\n|  baseColor |  string |  The color of the Joystick base |\n| stickColor  |  string |  The color of the Stick |\n|  throttle | number  |  The [throttling](https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf) rate of the move callback |\n| sticky | Boolean | Should the joystick stay where it is when the interaction ends |\n| stickImage | string | The image to be shown for the joystick |\n| baseImage | string | The image to be shown for the pad |\n| followCursor | Boolean | Make the stick follow the cursor position |\n|  move | Function  | Callback fired on every mouse move, not throttled unless a throttling rate is provided as above  |\n|  stop | Function  | Callback fired when the user releases the joystick  |\n| start  |  Function | Callback fired when the user starts moving the Joystick  |\n| disabled | Boolean | When true, block any usage of the Joystick. This will also apply the `joystick-disabled` and `joystick-base-disabled` classNames  |\n| stickShape | JoystickShape | The shape of the joystick default = circle|\n| baseShape | JoystickShape | The shape of the joystick default = circle|\n| controlPlaneShape | JoystickShape | Override the default shape behaviour of the control plane - circle, square, axisX, axisY|\n| minDistance | number | Percentage 0-100 - the minimum distance to start receive IJoystickMove events|\n| pos | {x: number, y: number}| Override the joystick position (doesn't work if the user is interacting. You can use `disabled` to force this)|\n```TypeScript\nimport {JoystickShape} from \"./shape.enum\"; \ninterface IJoystickProps {\n    size?: number;\n    stickSize?: number;\n    baseColor?: string;\n    stickColor?: string;\n    disabled?: boolean;\n    throttle?: number;\n    sticky?: boolean;\n    stickImage?: string;\n    baseImage?: string;\n    followCursor?: boolean;\n    move?: (event: IJoystickUpdateEvent) =\u003e void;\n    stop?: (event: IJoystickUpdateEvent) =\u003e void;\n    start?: (event: IJoystickUpdateEvent) =\u003e void;\n    baseShape?: JoystickShape;\n    stickShape?: JoystickShape;\n    controlPlaneShape?: JoystickShape;\n    minDistance?: number;\n    pos: {x: number, y: number}\n}\n```\n\n```TypeScript\ntype JoystickDirection = \"FORWARD\" | \"RIGHT\" | \"LEFT\" | \"BACKWARD\";\n\nexport interface IJoystickUpdateEvent {\n    type: \"move\" | \"stop\" | \"start\";\n    x: number | null;\n    y: number | null;\n    direction: JoystickDirection | null;\n    distance: number; // Percentile 0-100% of joystick \n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felmarti%2Freact-joystick-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felmarti%2Freact-joystick-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felmarti%2Freact-joystick-component/lists"}