Lipsson-cursor-react NPM

Installation

$ npm install lipsson-cursor-react

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