Custom Cursor In React – custom-react-cursor

react-special-cursor gives you the ability to decorate your cursor not only one shape it lets you change the shape with the different class name that you passed to Component.

How to use it:

1. Install and import the react-special-cursor.

# NPM
$ npm i react-special-cursor

import Cursor from "react-special-cursor";

2. Basic usage.

function App() {
  return (
    <Cursor color="orange">
      <App>...</App>
    </Cursor>
  );
}

3. Available props.

• children: elements that you want to get the cursor shape usually at the top level
• hoverClasses: an array of objects that accept 2 properties on the name of the class that you want while hovering having an action an another the style class name that you want to set on dotElement
• borderClassName: this class name will pass to cursor-border
• dotClassName: this class name will pass to cursor-dot

Preview:

Download Details:

Author: amirho1

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/amirho1/react-special-cursor

License: MIT