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