React Multi Cursor
Add one or more custom cursors to your react app.
Check it live here.
Features
- Create a single or multiple cursors
- Style each cursor individually
- Position them as you wish
- Add smooth easing to cursors
Installation
npm install react-multi-cursor
With npm yarn add react-multi-cursor
With yarn Usage
To add your custom cursors create an array of objects and pass it through the cursors
prop
import ReactMultiCursor from "react-multi-cursor" const cursors = angle: 0 // mouse position angle: 180 // opposite ... const App = <ReactMultiCursor = />
Available props
cursors
| array | required
Array of objects to display cursors.
angle
(required) Angle of rotation.0
is on mouse position,180
is the opposite of mouse position.style
Style object to pass to each cursor element - to remove default styles pass an empty objectclassName
CSS class to pass to each cursor element - default:'multi-cursor'
const cursors = angle: 0 style: backgroundColor: 'red' className: 'myCustomCursor' <ReactMultiCursor = />
smoothness
| number | optional | default: 1
Smoothness of cursor position.
Default is 1 and it will not add any smooth to the cursor.
<ReactMultiCursor = = />
throttleDelay
| number | optional | default: 10
Mousemove event throttle delay
<ReactMultiCursor = = />
hoverItemClassName
| string | optional | default: "multi-cursor-item"
ClassName to trigger hover state.
It will add multi-cursor--hover
className on each cursor by default.
<div ="hover-item">Hover</div>
<ReactMultiCursor = ="hover-item" />
hoverCursorClassName
| string | optional | default: "multi-cursor--hover"
Hover state className on each cursor.
It will be added whenever a cursor hover over .multi-cursor-item
<ReactMultiCursor = ="myCustomCursor--hover"/>
onUpdate
| function | optional
Callback called after each position update. The argument will give you an array of cursors with their current position.
<ReactMultiCursor = =/>
onClick
| function | optional
Click event callback. The arguments will give you the original event and the array of cursors with their position.
<ReactMultiCursor = =/>
onTouchStart
| function | optional
Touch start event callback. The arguments will give you the original event and the array of cursors with their position.
<ReactMultiCursor = =/>
onTouchMove
| function | optional
Touch move event callback. The arguments will give you the original event and the array of cursors with their position.
<ReactMultiCursor = =/>
onTouchCancel
| function | optional
Touch cancel event callback. The arguments will give you the original event and the array of cursors with their position.
<ReactMultiCursor = =/>
onTouchEnd
| function | optional
Touch end event callback. The arguments will give you the original event and the array of cursors with their position.
<ReactMultiCursor = =/>