{"id":24645007,"url":"https://github.com/psychlone77/react-diy-cursor","last_synced_at":"2026-04-16T12:05:16.754Z","repository":{"id":248655878,"uuid":"829287160","full_name":"psychlone77/react-diy-cursor","owner":"psychlone77","description":"This is a customizable React library that allows you to create and apply unique cursor designs for your web applications.","archived":false,"fork":false,"pushed_at":"2024-10-25T12:48:11.000Z","size":67,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-29T04:21:14.786Z","etag":null,"topics":["custom-cursor","npm-package","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/psychlone77.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2024-07-16T06:17:01.000Z","updated_at":"2024-10-25T12:48:07.000Z","dependencies_parsed_at":"2024-08-25T14:30:30.081Z","dependency_job_id":"cf8bfa39-55f2-42a1-8b1a-598e0018106d","html_url":"https://github.com/psychlone77/react-diy-cursor","commit_stats":null,"previous_names":["psychlone77/react-diy-cursor"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/psychlone77/react-diy-cursor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psychlone77%2Freact-diy-cursor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psychlone77%2Freact-diy-cursor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psychlone77%2Freact-diy-cursor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psychlone77%2Freact-diy-cursor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/psychlone77","download_url":"https://codeload.github.com/psychlone77/react-diy-cursor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psychlone77%2Freact-diy-cursor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31884933,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T11:36:10.202Z","status":"ssl_error","status_checked_at":"2026-04-16T11:36:09.652Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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":["custom-cursor","npm-package","react","typescript"],"created_at":"2025-01-25T14:13:59.266Z","updated_at":"2026-04-16T12:05:16.736Z","avatar_url":"https://github.com/psychlone77.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ✨ react-diy-cursor\n\n`react-diy-cursor` is a customizable React library that lets you create and apply unique, dynamic cursor designs to your web applications. Elevate your UI with interactive and visually appealing cursors!\n\n## 🚀 Main Features\n  \n- [x] 🚫 **Disabling Cursor on Window Exit**\n  - Automatically hide the cursor (the mouse component) when it leaves the browser window.\n\n- [ ] 🎡 **Custom Cursor with Rotation and Scaling**\n  - **Rotation:** Rotate the cursor based on its movement direction.\n  - **Scaling:** Adjust cursor size depending on the speed of movement.\n  - **Customization:** Enable or disable rotation and scaling through settings.\n\n- [ ] 📱 **Mobile Device Detection and Interaction Disabling**\n  - **User Agent Detection:** Detect mobile devices and disable custom cursor features.\n  - **Fallback:** Revert to default cursor behavior or a touch-friendly alternative on mobile devices.\n\n- [ ] 🖱️ **Mouse Movement and Speed Tracking Hooks**\n  - **Movement Direction:** Get hooks to track the direction of cursor movement.\n  - **Speed Tracking:** Monitor and return the cursor's movement speed.\n  - **Position Tracking:** Optionally track and return the cursor’s current position.\n\n- [ ] ✨ **Custom Cursors with Hover Effects and more**\n  - **Text Hover Effect:** Change the cursor or display additional effects (like text) when hovering over specific elements.\n  - **Cursor Follow Effect:** Implement elements that follow the cursor with trailing effects or delays.\n\n\u003cbr/\u003e\n\n\n---\n\n## 📚 User Guide to Setup\n\n## Installation and Setup\n### Local Installation\n\n  To use the React-DIY-Cursor package in your project, follow the steps below:\n\n 1. **Download the Source Code**\n\n    - First, clone or download the source code of the React-DIY-Cursor package to your local machine.\n\n 2. **Open the Project in a Terminal**\n\n    - Navigate to the `react-diy-cursor` folder in your terminal\n\n 3. **Build the Package**\n\n    - In your code editor, open the terminal and compile the package by running the build script. This will create the necessary files in the `dist` or `lib` folder, depending on the package setup.\n\n      ```bash\n      npm run build\n      ```\n### `npm` Installation\n\n *Coming Soon*\n \n---\n\u003cbr/\u003e\n\n## 📚 User Guide to integrate in your project\n- Detailed instructions on how to integrate and customize `react-diy-cursor` in your projects.\n\n\n### Steps to Integrate `react-diy-cursor`\n\n1. **Open Your Project**\n   - Open the project where you want to use the DIY cursor in your code editor.\n\n2. **Install the Package**\n    - Open the terminal in your code editor and run the following command to install the local package and it will update the dependencies in both package.json and package-lock.json.\n\n    ```bash\n    npm install ../react-diy-cursor\n    ```\n\n    **Note**: The path should be relative to the location of your current project.\n\n3. **Import the Package in Your Project**\n    Here's an example of how to use the `CustomCursor` component in your React application:\n    \n    ```tsx\n    import React, { useState } from 'react';\n    import CustomCursor from './path-to-your-cloned-repo';\n    \n    const App = () =\u003e {\n    \n      const customStyles = {\n        backgroundColor: 'yellow',\n        borderRadius: '50%',\n        width: '20px',\n        height: '20px',\n      };\n    \n      return (\n        \u003cdiv\u003e\n          \u003cCustomCursor customStyles={customStyles}\u003e\n            \u003cspan\u003eCustom Cursor Content\u003c/span\u003e\n          \u003c/CustomCursor\u003e\n        \u003c/div\u003e\n      );\n    };\n    \n    export default App;\n    ```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsychlone77%2Freact-diy-cursor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpsychlone77%2Freact-diy-cursor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsychlone77%2Freact-diy-cursor/lists"}