search

ajmnz / custom-cursor-react

🎉 Animated, customizable and interactive cursor for React
https://ajmnz.github.io/custom-cursor-react
MIT License
53 stars 18 forks source link
cursor custom-cursor customizable react react-cursor react-interactive reactjs

readme

React Custom Cursor 🎉

Animated, customizable and interactive cursor for React

npm version npm downloads Build status

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.