{"id":16790839,"url":"https://github.com/morethanmin/react-cursorify","last_synced_at":"2025-06-11T18:38:10.018Z","repository":{"id":147211733,"uuid":"612982078","full_name":"morethanmin/react-cursorify","owner":"morethanmin","description":"Customizable cursor component in react project 🕹️","archived":false,"fork":false,"pushed_at":"2023-04-19T14:59:56.000Z","size":1868,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-01T06:33:33.046Z","etag":null,"topics":["component","component-library","custom-cursor","react-component","react-cursorify"],"latest_commit_sha":null,"homepage":"https://morethanmin.github.io/react-cursorify","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/morethanmin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":null,"code_of_conduct":".github/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},"funding":{"github":"morethanmin","custom":"https://toss.me/moremin"}},"created_at":"2023-03-12T15:01:55.000Z","updated_at":"2024-09-17T05:35:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"e7fae983-c67e-4e8e-a142-4ba445af05a4","html_url":"https://github.com/morethanmin/react-cursorify","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/morethanmin%2Freact-cursorify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morethanmin%2Freact-cursorify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morethanmin%2Freact-cursorify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morethanmin%2Freact-cursorify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/morethanmin","download_url":"https://codeload.github.com/morethanmin/react-cursorify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248314170,"owners_count":21083001,"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":["component","component-library","custom-cursor","react-component","react-cursorify"],"created_at":"2024-10-13T08:31:57.019Z","updated_at":"2025-04-10T23:27:44.389Z","avatar_url":"https://github.com/morethanmin.png","language":"TypeScript","funding_links":["https://github.com/sponsors/morethanmin","https://toss.me/moremin"],"categories":[],"sub_categories":[],"readme":"# react-cursorify\r\n\r\n![react-cursorify-social-card](https://user-images.githubusercontent.com/72514247/227773776-762fbd64-1662-4d01-8049-9fee079cf717.png)\r\n\r\nCustomizable cursor component for any style. 🕹️\r\n\r\n[Website](https://morethanmin.github.io/react-cursorify)\r\n\r\n# Getting Started\r\n\r\nLet's apply react-cursorify!\r\n\r\n## Install react-cursorify\r\n\r\nYou can install react-cursorify in your React project using the two commands below.\r\n\r\nvia npm:\r\n\r\n```zsh\r\nnpm install react-cursorify\r\n```\r\n\r\nor via yarn:\r\n\r\n```zsh\r\nyarn add react-cursorify\r\n```\r\n\r\n## Apply to your react project\r\n\r\nTo apply react-cursorify, simply wrap your React project with `CursorifyProvider`. It's easy, right?\r\n\r\n```tsx\r\nimport { CursorifyProvider } from 'react-cursorify'\r\n\r\nconst App = () =\u003e {\r\n  return (\r\n    \u003cCursorifyProvider\u003e\r\n      \u003c\u003e{/*....your component */}\u003c/\u003e\r\n    \u003c/CursorifyProvider\u003e\r\n  )\r\n}\r\n\r\nexport default App\r\n```\r\n\r\n## Applying default settings\r\n\r\nIf you want to set default options for the cursor, you can apply the default cursor component, opacity, and delay. Typically, changing the cursor settings on a website is not common, so it is better to apply your website settings to the default settings.\r\n\r\nRefer to the description of each option below.\r\n\r\n- cursor: pass the React component you want to apply.\r\n- delay: You can pass a number between 1 and 10.\r\n- opacity: You can pass a number between 0 and 1.\r\n- visibleDefaultCursor: You can pass a boolean.\r\n\r\n```tsx\r\nimport { CursorifyProvider, EmojiCursor } from 'react-cursorify'\r\n\r\nconst App = () =\u003e {\r\n  return (\r\n    \u003cCursorifyProvider\r\n      cursor={EmojiCursor}\r\n      delay={2}\r\n      opacity={0.7}\r\n      visibleDefaultCursor={false}\r\n    \u003e\r\n      \u003c\u003e{/*....your component */}\u003c/\u003e\r\n    \u003c/CursorifyProvider\u003e\r\n  )\r\n}\r\n\r\nexport default App\r\n```\r\n\r\n## More info\r\n\r\nFor more details, please refer to the [Docs](https://morethanmin.github.io/react-cursorify/).\r\n\r\n## Cursor\r\n\r\nreact-cursorify manages custom cursor components so that they can be shared and used. Please share your cursor component via PR!\r\n\r\n## Contributing\r\n\r\nCheck out the [Contributing Guide](.github/CONTRIBUTING.md).\r\n\r\n### Contributors\r\n\r\n\u003c!--\r\nContributors template:\r\n\u003ca href=\"https://github.com/{username}\"\u003e\u003cimg src=\"{src}\" width=\"50px\" alt=\"{username}\" /\u003e\u003c/a\u003e\u0026nbsp;\u0026nbsp;\r\n--\u003e\r\n\r\n## Support\r\n\r\nreact-cursorify is an MIT-licensed open source project. It can grow thanks to the sponsors and support from the amazing backers.\r\n\r\n### Sponsors\r\n\r\n\u003c!--\r\nSponsors template:\r\n\u003ca href=\"https://github.com/{uesrname}\"\u003e\u003cimg src=\"{src}\" width=\"50px\" alt=\"{username}\" /\u003e\u003c/a\u003e\u0026nbsp;\u0026nbsp;\r\n--\u003e\r\n\r\nnone.\r\n\r\n## License\r\n\r\nThe [MIT License](LICENSE).\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorethanmin%2Freact-cursorify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorethanmin%2Freact-cursorify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorethanmin%2Freact-cursorify/lists"}