{"id":26460109,"url":"https://github.com/shridhar-dev/react-cursors","last_synced_at":"2025-03-19T02:48:25.915Z","repository":{"id":38446855,"uuid":"417205386","full_name":"Shridhar-dev/react-cursors","owner":"Shridhar-dev","description":null,"archived":false,"fork":false,"pushed_at":"2023-07-07T17:18:52.000Z","size":1385,"stargazers_count":16,"open_issues_count":11,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-14T09:05:50.851Z","etag":null,"topics":["css","cursors","html","javascript","npm","npm-package","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Shridhar-dev.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}},"created_at":"2021-10-14T16:31:16.000Z","updated_at":"2024-10-15T08:47:43.000Z","dependencies_parsed_at":"2023-02-07T03:45:35.243Z","dependency_job_id":null,"html_url":"https://github.com/Shridhar-dev/react-cursors","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shridhar-dev%2Freact-cursors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shridhar-dev%2Freact-cursors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shridhar-dev%2Freact-cursors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shridhar-dev%2Freact-cursors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Shridhar-dev","download_url":"https://codeload.github.com/Shridhar-dev/react-cursors/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244345095,"owners_count":20438241,"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":["css","cursors","html","javascript","npm","npm-package","reactjs"],"created_at":"2025-03-19T02:48:25.308Z","updated_at":"2025-03-19T02:48:25.906Z","avatar_url":"https://github.com/Shridhar-dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![](https://img.shields.io/npm/v/react-cursors)](https://www.npmjs.com/package/react-cursors)\n[![](https://img.shields.io/npm/dm/react-cursors)](https://www.npmjs.com/package/react-cursors)\n![react' (1) 1](https://user-images.githubusercontent.com/65373279/137585010-15a171b1-9839-4c17-b177-79232d099d2d.png)\n\n\n\u003ch1 align=\"left\"\u003eReact Cursors\u003c/h1\u003e\n\u003cp align=\"left\"\u003eCollection of highly customizable cursors for react!\u003c/p\u003e\n\n\u003e Currently we have a few cursors ready for you to use, you may also customize them to your liking and contribute to this repo ✨\n\n## Installation\n```\nnpm i react-cursors\n```\n\n## Usage\n\nImport the component\n\n``` js\nimport { CircleCursor } from 'react-cursors'\n```\n\nUse it\n\n``` js\n\u003cCircleCursor \n        safeBoundaryX=\"1000\"\n        safeBoundaryY=\"700\"\n        initial={{\n                dotSize:\"2rem\",\n                circleSize:\"5rem\",\n                borderStyle:\"dotted\",\n                color:\"white\",\n                borderWidth:\"3px\",\n                circleDay:\"0.1s\",\n                dotDelay:\"0.05s\"\n        }}\n\n        hover={{\n                dotSize:\"0rem\",\n                circleSize:\"10rem\",\n                borderStyle:\"dotted\",\n                color:\"white\",\n                borderWidth:\"3px\",\n                circleDay:\"0.1s\",\n                dotDelay:\"0.05s\"\n        }}\n/\u003e\n\n```\n\nProps provided in the initial will be the initial styles of the cursor, and the props provided in the hover will be the styles of cursor when the cursor hovers over an element with class 'hover-detect'. \n\n\u003cbr/\u003e\n\nIf you want to use default styling, or no hover elements then you will have to keep the component as :\n\n```js\n\n\u003cCircleCursor initial={{}} hover={{}} /\u003e\n\n```\n\u003cbr/\u003e\n\nFurther, it is always recommeded to use lazy loading while importing the component, to avoid any DOM related problems.\n\nProblems faced without lazy loading can lead to bugs like, hover styles not getting activated when cursors hovers over elements having class 'hover-detect'\n\n```\n\nimport React, { Suspense } from \"react\"; // we also need to import suspense\n\nconst CircleCursor = React.lazy(() =\u003e import('react-cursors').then(module =\u003e ({ default: module.CircleCursor }))) ;\n\n```\n\nAnd using it like : \n\n```html\n\n     \u003cdiv\u003e \n          \u003cComponents /\u003e\n          \u003cSuspense fallback={\u003cdiv\u003eLoading ... \u003c/div\u003e}\u003e\n            \u003cCircleCursor initial={{circleSize:'30px',dotSize:'6px',color:'white'}} hover={{circleSize:'50px',dotSize:'0px',color:'white'}}/\u003e\n          \u003c/Suspense\u003e \n      \u003c/div\u003e\n\n```\n\n\n\n\n## Element attributes \nAll the attributes are optional, incase values are not provided, the default values will be used\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n### Common for all\n\u003cbr/\u003e\n\n| Attribute               | Values                   | Description                                                                              |\n| ----------------------- | ------------------------ | ---------------------------------------------------------------------------------------- |\n| `safeBoundaryX`      | `string`                 | Used to set the boundary of the cursor along the x-axis, helpful inorder to prevent overflow \n| `safeBoundaryY`      | `string`                 | Used to set the boundary of the cursor along the y-axis, helpful inorder to prevent overflow \n\n\u003cbr /\u003e\u003cbr /\u003e\n\n### Circle Cursor\n\u003cbr/\u003e\n\n| Attribute               | Values                   | Description                                                                              |\n| ----------------------- | ------------------------ | ---------------------------------------------------------------------------------------- |\n| `dotSize`        | `string`                 | Used to set the size of the inner dot                                           |\n| `circleSize`   |    `string`             | Used to set the size of the outer circle |\n| `borderStyle`    | `string`                | Used to set the border style of the outer circle                                                        |\n| `color`      | `string`                 | Used to set the color of the outer circle and inner dot                                                      |\n| `borderWidth`      | `string`                 | Used to set the border width of the outer circle                                                     |\n| `circleDelay`      | `string`                 | Used to set the delay of the outer circle                                                      |\n| `dotDelay`      | `string`                 | Used to set the delay of the inner circle                                                      |\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n### Emoji Cursor\n\u003cbr/\u003e\n\n| Attribute               | Values                   | Description                                                                              |\n| ----------------------- | ------------------------ | ---------------------------------------------------------------------------------------- |\n| `size`              |        `string`          | Used to set the size of the emoji                                                                       |\n| `delay`        | `string`                 | Used to set the delay of the emoji |\n| `emoji`   |    `string`             | Used to set the emoji  |\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n### Image Cursor\n\n#### Experimental ⚠\n\u003cbr/\u003e\n\n| Attribute               | Values                   | Description                                                                              |\n| ----------------------- | ------------------------ | ---------------------------------------------------------------------------------------- |\n| `width`              |        `string`          | Used to set the width of the image                                                          |\n| `height`              |        `string`          | Used to set the height of the image                                                          |\n| `delay`        | `string`                 | Used to set the delay of the image |\n| `url`   |    `string`             | Url of the image  |\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n### Square Rectangle Cursor\n\u003cbr/\u003e\n\n| Attribute               | Values                   | Description                                                                              |\n| ----------------------- | ------------------------ | ---------------------------------------------------------------------------------------- |\n| `innerShapeSize`        | `string`                 | Used to set the size of the inner shape                                           |\n| `shapeSize`   |    `string`             | Used to set the size of the outer shape |\n| `borderStyle`    | `string`                | Used to set the border style of the outer circle                                                        |\n| `color`      | `string`                 | Used to set the color of the outer shape and inner shape                                                      |\n| `borderWidth`      | `string`                 | Used to set the border width of the outer circle                                                     |\n| `shapeDelay`      | `string`                 | Used to set the delay of the outer circle                                                      |\n| `innerShapeDelay`      | `string`                 | Used to set the delay of the inner circle                                                      |\n\n\n\u003cbr /\u003e\n\n---\n\n\u003ch3 align=\"center\"\u003e \u003cb\u003eJoin our Community and feel free to drop your questions on\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\n   \u003ca href=\"https://discord.gg/druweDMn3s\"\u003e\u003c/a\u003e\n   \u003cimg alt=\"Discord\" src=\"https://img.shields.io/badge/Discord-7289DA?style=for-the-badge\u0026logo=discord\u0026logoColor=white\"\u003e \n\u003c/p\u003e\n\n---\n        \n## Project Maintainers 🛠\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n       \u003ctr\u003e\n          \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/DevrajDC\"\u003e\u003cimg alt=\"\" src=\"https://avatars.githubusercontent.com/u/65373279\" width=\"130px;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003e Devraj Chatribin \u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e💻\u003c/td\u003e \u003c/a\u003e\u003c/td\u003e\n        \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Shridhar-dev\"\u003e\u003cimg alt=\"\" src=\"https://avatars.githubusercontent.com/u/52820662\" width=\"130px;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003e Shridhar Kamat \u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e💻\u003c/td\u003e \u003c/a\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshridhar-dev%2Freact-cursors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshridhar-dev%2Freact-cursors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshridhar-dev%2Freact-cursors/lists"}