{"id":27373595,"url":"https://github.com/ajmnz/custom-cursor-react","last_synced_at":"2025-04-13T11:15:34.103Z","repository":{"id":38397545,"uuid":"312038718","full_name":"ajmnz/custom-cursor-react","owner":"ajmnz","description":"🎉 Animated, customizable and interactive cursor for React","archived":false,"fork":false,"pushed_at":"2021-08-25T17:34:52.000Z","size":2638,"stargazers_count":59,"open_issues_count":3,"forks_count":17,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-13T11:15:29.480Z","etag":null,"topics":["cursor","custom-cursor","customizable","react","react-cursor","react-interactive","reactjs"],"latest_commit_sha":null,"homepage":"https://ajmnz.github.io/custom-cursor-react","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/ajmnz.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":"2020-11-11T17:15:47.000Z","updated_at":"2025-02-14T12:13:52.000Z","dependencies_parsed_at":"2022-08-09T12:30:55.037Z","dependency_job_id":null,"html_url":"https://github.com/ajmnz/custom-cursor-react","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajmnz%2Fcustom-cursor-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajmnz%2Fcustom-cursor-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajmnz%2Fcustom-cursor-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajmnz%2Fcustom-cursor-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ajmnz","download_url":"https://codeload.github.com/ajmnz/custom-cursor-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248703193,"owners_count":21148118,"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":["cursor","custom-cursor","customizable","react","react-cursor","react-interactive","reactjs"],"created_at":"2025-04-13T11:15:33.481Z","updated_at":"2025-04-13T11:15:34.084Z","avatar_url":"https://github.com/ajmnz.png","language":"JavaScript","readme":"\u003ch2 align='center'\u003eReact Custom Cursor 🎉\u003c/h2\u003e\n\u003cp align='center'\u003eAnimated, customizable and interactive cursor for React\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/custom-cursor-react\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/custom-cursor-react.svg\" alt=\"npm version\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/custom-cursor-react\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/custom-cursor-react\" alt=\"npm downloads\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://travis-ci.com/github/ajmnz/custom-cursor-react\"\u003e\u003cimg src=\"https://travis-ci.com/ajmnz/custom-cursor-react.svg?branch=master\" alt=\"Build status\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdiv align='center'\u003e\n  \u003cimg src='https://raw.githubusercontent.com/ajmnz/custom-cursor-react/master/screenshots/custom-cursor-react.gif' width='100%'\u003e\n\u003c/div\u003e\n\n## Installation\n```\n$ npm install custom-cursor-react\n```\n\n## Try it!\n[Live Demo](https://ajmnz.github.io/custom-cursor-react)\n\n## Usage\nImport the component and styles\n\n```javascript\nimport CustomCursor from 'custom-cursor-react';\nimport 'custom-cursor-react/dist/index.css';\n```\n\nInclude it in your App\n\n```jsx\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cCustomCursor\n      targets={['.link', '.your-css-selector']}\n      customClass='custom-cursor'\n      dimensions={30}\n      fill='#FFF'\n      smoothness={{\n        movement: 0.2,\n        scale: 0.1,\n        opacity: 0.2,\n      }}\n      targetOpacity={0.5}\n    /\u003e\n  \u003c/div\u003e\n);\n```\n\n## Available properties\n\nAll of them are optional.\n\u003e Don't forget the dot (`.class`) when setting the targets.\n\n\n| Property            | Type             | Description                                                                       | Default       |\n|---------------------|------------------|-----------------------------------------------------------------------------------|---------------|\n| **`targets`**       | string or array  | CSS selectors of the elements you want your cursor to interact with when hovered. | undefined     |\n| **`customClass`**   | string           | Custom class of the `circle` element.                                             | cursor-circle |\n| **`dimensions`**    | number           | Width and height of the circle                                                    | 50            |\n| **`fill`**          | string           | Hex code of the cursor's color                                                    | #000          |\n| **`strokeColor`**   | string           | Hex code of the cursor's stroke color                                             | #000          |\n| **`strokeWidth`**   | number           | Stroke width of the cursor                                                        | 0             |\n| **`smoothness`**    | number or object | Global smoothness or specific value for `scale`, `opacity` or `movement`.         | 0.2 (Global)  |\n| **`opacity`**       | number           | Opacity of the cursor                                                             | 0.5           |\n| **`targetOpacity`** | number           | Opacity of the cursor when hovering the `targets`                                 | 1             |\n| **`targetScale`**   | number           | Scale of the cursor when hovering the `targets`                                   | 4             |\n\n\n\n\u003e This component is a refactor of a project by Mary Low available [here](https://github.com/codrops/AnimatedCustomCursor/).","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajmnz%2Fcustom-cursor-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fajmnz%2Fcustom-cursor-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajmnz%2Fcustom-cursor-react/lists"}