custom-cursor-react

React Custom Cursor 🎉

Animated, customizable and interactive cursor for React

Installation

``
$ npm install custom-cursor-react
`

Try it!

Live Demo

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.