{"id":24568165,"url":"https://github.com/amirho1/react-special-cursor","last_synced_at":"2025-06-13T08:07:20.416Z","repository":{"id":57345098,"uuid":"427061493","full_name":"amirho1/react-special-cursor","owner":"amirho1","description":"react-special-cursor gives you the ability to decorate your cursor not only one shape it let you change the shape with the different class name that you passed to Component ","archived":false,"fork":false,"pushed_at":"2023-02-05T07:32:41.000Z","size":1270,"stargazers_count":23,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-22T15:49:07.170Z","etag":null,"topics":["animated-cursor","cursor","cursor-theme","custom-cursors","raect","react-cursor","react-special-cursor","typescript-library","typescript-react"],"latest_commit_sha":null,"homepage":"https://amirho1.github.io/react-special-cursor/","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/amirho1.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-11-11T16:04:07.000Z","updated_at":"2025-04-12T10:00:45.000Z","dependencies_parsed_at":"2023-02-18T22:15:57.783Z","dependency_job_id":null,"html_url":"https://github.com/amirho1/react-special-cursor","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/amirho1/react-special-cursor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amirho1%2Freact-special-cursor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amirho1%2Freact-special-cursor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amirho1%2Freact-special-cursor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amirho1%2Freact-special-cursor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amirho1","download_url":"https://codeload.github.com/amirho1/react-special-cursor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amirho1%2Freact-special-cursor/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259606977,"owners_count":22883559,"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":["animated-cursor","cursor","cursor-theme","custom-cursors","raect","react-cursor","react-special-cursor","typescript-library","typescript-react"],"created_at":"2025-01-23T14:19:58.893Z","updated_at":"2025-06-13T08:07:20.386Z","avatar_url":"https://github.com/amirho1.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv style=\"text-align:justify;\"\u003e\n\n# custom-react-cursor\n\nA [React](https://reactjs.org) Custom able cursor that can decorate your site also your hand is open to manipulate the cursor with css\n\n## [Demo live](https://amirho1.github.io/react-special-cursor/)\n\n## Installing\n\n```\n  npm i react-special-cursor\n```\n\n## Running Demo\n\n```\nnpm i\n```\n\n```\nnpm run serve\n```\n\n## Build\n\n```\nnpm run build\n```\n\n## Test\n\nit's on watch mode you can change it through [package.json](./package.json)\n\n```\nnpm run test\n```\n\n## Usage\n\n```javascript\nimport Cursor from \"react-special-cursor\";\n\nfunction App() {\n  return (\n    \u003cCursor\u003e\n      \u003cApp\u003e...\u003c/App\u003e\n    \u003c/Cursor\u003e\n  );\n}\n```\n\nif you want to put something beside App component you should put them inside a **Fragment** like this\n\n```javascript\nimport Cursor from \"react-special-cursor\";\n\nfunction App() {\n  return (\n    \u003cCursor\u003e\n      \u003cReact.Fragment\u003e\n        \u003cApp\u003e...\u003c/App\u003e\n        \u003cAnotherComponent\u003e\u003c/AnotherComponent\u003e\n        ...\n      \u003c/React.Fragment\u003e\n    \u003c/Cursor\u003e\n  );\n}\n\n// or\n\nfunction App() {\n  return (\n    \u003cCursor\u003e\n      \u003c\u003e\n        \u003cApp\u003e...\u003c/App\u003e\n        \u003cAnotherComponent\u003e...\u003c/AnotherComponent\u003e\n        ...\n      \u003c/\u003e\n    \u003c/Cursor\u003e\n  );\n}\n\n// also you can do this\n\nfunction App() {\n  return \u003cCursor children={\u003cApp\u003e...\u003c/App\u003e} /\u003e;\n}\n```\n\n# Example file\n\n```javascript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport Cursor from \"./Cursor/Cursor\";\nimport \"./demo.scss\";\n\nconst welcome = (\n  \u003ch3 className=\"h3\"\u003e\n    Welcome to Demo of React-special-cursor from version 1.1.0 u will have the\n    ability to show texts, elements ... on hover inside the cursor-dot by only\n    adding a cursorChildren to hoverClass object\n    \u003cspan style={{ color: \"red\" }}\u003e Click to see documentation\u003c/span\u003e\n    \u003cimg\n      className=\"react-icon\"\n      src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png\"\n      alt=\"react img \"\n    /\u003e\n  \u003c/h3\u003e\n);\n\nexport default function App() {\n  return (\n    \u003cCursor\n      hoverClasses={[\n        { classNameOfTargetElement: \"head\", classNameOfStyle: \"head-hover\" },\n        { classNameOfTargetElement: \"link\", classNameOfStyle: \"hover\" },\n        { classNameOfTargetElement: \"react\", classNameOfStyle: \"react-hover\" },\n        {\n          classNameOfTargetElement: \"author\",\n          classNameOfStyle: \"author-on-hover\",\n        },\n        {\n          classNameOfTargetElement: \"children\",\n          classNameOfStyle: \"children-hover\",\n          cursorChildren: welcome,\n        },\n      ]}\u003e\n      \u003cdiv className=\"wrapper\"\u003e\n        \u003ch1\u003e\n          \u003ca\n            className=\"head\"\n            href=\"https://github.com/amirho1/react-cursors.git\"\n            target=\"_blank\"\u003e\n            React-cursors\n          \u003c/a\u003e\n        \u003c/h1\u003e\n        \u003cp\u003e\n          A custom animated cursor for{\" \"}\n          \u003ca className=\"react\" target=\"_blank\" href=\"https://reactjs.org/\"\u003e\n            React\n          \u003c/a\u003e{\" \"}\n          also supports{\" \"}\n          \u003ca\n            className=\"link\"\n            target=\"_blank\"\n            href=\"https://www.typescriptlang.org/download\"\u003e\n            {\" \"}\n            Typescript\n          \u003c/a\u003e\n        \u003c/p\u003e\n        \u003cp\u003eYou can hover over the links and click to see animations\u003c/p\u003e\n        Author:{\" \"}\n        \u003ca href=\"https://github.com/amirho1\" target=\"_blank\" className=\"author\"\u003e\n          {\" \"}\n          AmirHossein Salighedar\n        \u003c/a\u003e\n\n        \u003ca\n          href=\"https://github.com/amirho1/react-special-cursor\"\n          style={{ marginTop: \"3em\", fontSize: \"2rem\", display: \"block\" }}\u003e\n          \u003cspan className=\"children\"\u003eHoverMe\u003c/span\u003e\n        \u003c/a\u003e\n      \u003c/div\u003e\n    \u003c/Cursor\u003e\n  );\n}\n\nconst container = document.getElementById(\"root\");\nconst root = container \u0026\u0026 createRoot(container);\n\nroot?.render(\u003cApp /\u003e);\n\n\n}\n```\n\n### css example\n\ncursor-dot is default the className for dot and for border is cursor-border\n\n```css\nbody {\n  background-color: #333;\n  color: white;\n  margin: 0;\n  padding: 0;\n  height: 1000px;\n}\n\na {\n  color: rgb(0, 166, 216);\n  text-decoration: none;\n}\n\n.wrapper {\n  margin: auto;\n  width: 60%;\n  text-align: center;\n  line-height: 2em;\n}\n\n.hover .cursor-dot {\n  width: 100px;\n  height: 100px;\n  z-index: -1;\n  background-color: lightblue;\n}\n\n.hover .cursor-border {\n  z-index: -1;\n}\n\n.link {\n  padding: 1em;\n}\n\n.react-hover .cursor-border {\n  background-color: white;\n  width: 50px;\n  height: 50px;\n  border-radius: 0;\n  z-index: -1;\n}\n\n.react-hover .cursor-dot {\n  z-index: -3;\n}\n\n.author {\n  color: orange;\n  font-weight: 800;\n  font-size: 1.3em;\n}\n\n.author-on-hover .cursor-dot {\n  width: 100px;\n  height: 100px;\n  background-color: gray;\n  z-index: -1;\n}\n\n.author-on-hover .cursor-border {\n  z-index: -1;\n}\n\n.head {\n  color: bisque;\n}\n\n.head-hover .cursor-border {\n  border: 5px dotted darkorange;\n}\n\n.head-hover .cursor-dot {\n  background-color: purple;\n  width: 20px;\n  height: 20px;\n}\n\n.children {\n  color: rgb(114, 253, 0);\n}\n\n.children-hover .cursor-dot {\n  width: 600px;\n  height: 600px;\n  background-color: white;\n  color: #333;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.children-hover .cursor-border {\n  z-index: -1;\n}\n\n.h3 {\n  color: #333;\n  padding: 2em;\n}\n\n.react-icon {\n  width: 200px;\n  position: absolute;\n  top: 2em;\n  right: 10.5em;\n}\n```\n\n## Properties\n\n| Name            | Type        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |\n| --------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children        | JSX.Element | the rest of your application i should be App component                                                                                                                                                                                                                                                                                                                                                                                                                                           |\n| borderClassName | string      | className of cursor border                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |\n| dotClassName    | string      | className of cursor inner dot                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |\n| turnOffOnPhone  | boolean     | turns off special cursor when user device is phone                                                                                                                                                                                                                                                                                                                                                                                                                                               |\n| hoverClasses    | object      | an array of objects that each object accepts 2 string one with name of classNameOfTargetElement that accepts the className of the elements that you want to have some styles on hover second is classNameOfStyle the className that will passed to the cursor-wrapper element from that you have access to modify cursor-dot and cursor-border on each hover also in version 1.1.0 it has a third property that you can display HTMLElement or text inside the cursor-dot you can check the Demo |\n\n## hoverClasses Object Type\n\n```typescript\n[\n  {\n    classNameOfTargetElement: string;\n    classNameOfStyle: string;\n    cursorChildren: JSX.Element | string | undefined | number\n  }\n]\n```\n\n## detecting phone devices\n\nit's detecting phone devices so u can turn it off on phone devices (it's off by default) but u cant turn it on by setting turnOffOnPhone to false\n\n## Author\n\n[**AmirHossein Salighedar**](https://github.com/amirho1)\n\n## License\n\n[MIT](./LICENSE)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famirho1%2Freact-special-cursor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famirho1%2Freact-special-cursor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famirho1%2Freact-special-cursor/lists"}