ccr

custom-cursor-react

🎉 Animated, customizable and interactive cursor for React

Showing:

Popularity

Downloads/wk

10

GitHub Stars

10

Maintenance

Last Commit

1mo ago

Contributors

3

Package

Dependencies

0

Size (min+gzip)

1.5KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

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.

PropertyTypeDescriptionDefault
targetsstring or arrayCSS selectors of the elements you want your cursor to interact with when hovered.undefined
customClassstringCustom class of the circle element.cursor-circle
dimensionsnumberWidth and height of the circle50
fillstringHex code of the cursor's color#000
strokeColorstringHex code of the cursor's stroke color#000
strokeWidthnumberStroke width of the cursor0
smoothnessnumber or objectGlobal smoothness or specific value for scale, opacity or movement.0.2 (Global)
opacitynumberOpacity of the cursor0.5
targetOpacitynumberOpacity of the cursor when hovering the targets1
targetScalenumberScale of the cursor when hovering the targets4

This component is a refactor of a project by Mary Low available here.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100