https://github.com/ajmnz/custom-cursor-react
🎉 Animated, customizable and interactive cursor for React
https://github.com/ajmnz/custom-cursor-react
cursor custom-cursor customizable react react-cursor react-interactive reactjs
Last synced: about 1 month ago
JSON representation
🎉 Animated, customizable and interactive cursor for React
- Host: GitHub
- URL: https://github.com/ajmnz/custom-cursor-react
- Owner: ajmnz
- License: mit
- Created: 2020-11-11T17:15:47.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-08-25T17:34:52.000Z (over 3 years ago)
- Last Synced: 2025-04-13T11:15:29.480Z (about 1 month ago)
- Topics: cursor, custom-cursor, customizable, react, react-cursor, react-interactive, reactjs
- Language: JavaScript
- Homepage: https://ajmnz.github.io/custom-cursor-react
- Size: 2.52 MB
- Stars: 59
- Watchers: 1
- Forks: 17
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React Custom Cursor 🎉
Animated, customizable and interactive cursor for React
## Installation
```
$ npm install custom-cursor-react
```
## Try it!
[Live Demo](https://ajmnz.github.io/custom-cursor-react)
## Usage
Import the component and styles
```javascript
import CustomCursor from 'custom-cursor-react';
import 'custom-cursor-react/dist/index.css';
```
Include it in your App
```jsx
const App = () => (
);
```
## Available properties
All of them are optional.
> Don't forget the dot (`.class`) when setting the targets.
| Property | Type | Description | Default |
|---------------------|------------------|-----------------------------------------------------------------------------------|---------------|
| **`targets`** | string or array | CSS selectors of the elements you want your cursor to interact with when hovered. | undefined |
| **`customClass`** | string | Custom class of the `circle` element. | cursor-circle |
| **`dimensions`** | number | Width and height of the circle | 50 |
| **`fill`** | string | Hex code of the cursor's color | #000 |
| **`strokeColor`** | string | Hex code of the cursor's stroke color | #000 |
| **`strokeWidth`** | number | Stroke width of the cursor | 0 |
| **`smoothness`** | number or object | Global smoothness or specific value for `scale`, `opacity` or `movement`. | 0.2 (Global) |
| **`opacity`** | number | Opacity of the cursor | 0.5 |
| **`targetOpacity`** | number | Opacity of the cursor when hovering the `targets` | 1 |
| **`targetScale`** | number | Scale of the cursor when hovering the `targets` | 4 |
> This component is a refactor of a project by Mary Low available [here](https://github.com/codrops/AnimatedCustomCursor/).