Installation

$ npm install custom-cursor-react

Try it!

Live Demo

Usage

Import the component and styles

import CustomCursor from 'custom-cursor-react';
import 'custom-cursor-react/dist/index.css';

Include it in your App

const App = () => (
  <div>
    <CustomCursor
      targets={['.link', '.your-css-selector']}
      customClass='custom-cursor'
      dimensions={30}
      fill='#FFF'
      smoothness={{
        movement: 0.2,
        scale: 0.1,
        opacity: 0.2,
      }}
      targetOpacity={0.5}
    />
  </div>
);

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.