{"id":26660630,"url":"https://github.com/codevideo/codevideo-mouse","last_synced_at":"2026-02-17T05:03:25.590Z","repository":{"id":273103044,"uuid":"918591036","full_name":"codevideo/codevideo-mouse","owner":"codevideo","description":"A series of React TypeScript components and for a fully auditable and replayable virtual mouse.","archived":false,"fork":false,"pushed_at":"2025-02-01T10:09:18.000Z","size":740,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-30T11:58:36.835Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codevideo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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,"zenodo":null}},"created_at":"2025-01-18T10:38:47.000Z","updated_at":"2025-02-01T10:09:22.000Z","dependencies_parsed_at":"2025-01-18T17:57:34.458Z","dependency_job_id":"9a68208d-6ae9-4451-9be4-423698fa9541","html_url":"https://github.com/codevideo/codevideo-mouse","commit_stats":null,"previous_names":["codevideo/codevideo-mouse"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codevideo/codevideo-mouse","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-mouse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-mouse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-mouse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-mouse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codevideo","download_url":"https://codeload.github.com/codevideo/codevideo-mouse/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-mouse/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29534505,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-17T05:00:25.817Z","status":"ssl_error","status_checked_at":"2026-02-17T04:57:16.126Z","response_time":100,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2025-03-25T12:18:50.416Z","updated_at":"2026-02-17T05:03:25.584Z","avatar_url":"https://github.com/codevideo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @fullstackcraft/codevideo-mouse\n\n![NPM Version](https://img.shields.io/npm/v/@fullstackcraftllc/codevideo-mouse)\n\nRecord your mouse moves to the pixel, capturing movement timing, speed, and even left-clicks, right-clicks, or highlights!\n\n`codevideo-mouse` exports a single React component, `Mouse`, which can be used in a variety of ways to record, replay, and visualize mouse movements.\n\n## Usage - Record Mouse Movements\n\n```tsx\nimport React, { useState } from 'react';\nimport { IAction } from '@fullstackcraft/codevideo-types';\nimport { IAction } from '@fullstackcraft/codevideo-mouse';\n\nexport default App = () =\u003e {\n    const [mouseActions, setMouseActions] = useState\u003cArray\u003cIAction\u003e\u003e([]);\n    const [recording, setRecording] = useState(false);\n    const [replaying, setReplaying] = useState(false);\n    return (\n        \u003cMouse \n            setMouseActions={setMouseActions}\n            recording={recording} \n            replaying={replaying}\n        /\u003e\n    )\n}\n\n```\n\nAll props that can be passed to Mouse are defined in [`IMouseProps`](./src/interfaces/IMouseProps):\n\n```typescript\ninterface IMouseProps {\n    mouseActions?: Array\u003cIAction\u003e; // Optional, an array of mouse actions to replay. Useful for when the mouse is in \"driver\" mode, and you want to replay the mouse actions\n    setMouseActions?: (actions: Array\u003cIAction\u003e) =\u003e void; // Optional, but essential if you need to interface with other codevideo components, such as video making and so on. This is the function to set the mouse actions as they are recorded\n    setMouseX?: (x: number) =\u003e void;\n    setMouseY?: (y: number) =\u003e void;\n    recording?: boolean; // Whether or not to record mouse movements\n    replaying?: boolean; // Whether or not to replay mouse movements\n    recordWithTrail?: boolean; // Optional, whether or not to record the mouse trail\n    replayWithTrail?: boolean; // Optional, whether or not to replay the mouse trail\n    leftClickAnimation?: boolean; // Optional, whether or not to animate left clicks\n    rightClickAnimation?: boolean; // Optional, whether or not to animate right clicks\n    customLeftClickAnimation?: () =\u003e JSX.Element; // Optional, a custom animation to show for left clicks\n    customRightClickAnimation?: () =\u003e JSX.Element; // Optional, a custom animation to show for right clicks\n    interactWithElements?: boolean; // Optional, whether or not clicks, drags and more interact with elements on the page\n}\n```\n\n(Click on the interface for the most up-to-date information - I can't guarantee that this README will always be up-to-date!)\n\n## Run Example App\n\nTo run the example app, clone this repository and run the following commands:\n\n```shell\ncd examples\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodevideo%2Fcodevideo-mouse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodevideo%2Fcodevideo-mouse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodevideo%2Fcodevideo-mouse/lists"}