README
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 cursors={cursors} />
)
Available props
| array | required cursors
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 cursors={cursors} />
| number | optional | default: 1 smoothness
Smoothness of cursor position.
Default is 1 and it will not add any smooth to the cursor.
<ReactMultiCursor cursors={cursors} smoothness={0.2} />
| number | optional | default: 10 throttleDelay
Mousemove event throttle delay
<ReactMultiCursor cursors={cursors} throttleDelay={100} />
| string | optional | default: "multi-cursor-item" hoverItemClassName
ClassName to trigger hover state.
It will add multi-cursor--hover
className on each cursor by default.
<div className="hover-item">Hover</div>
<ReactMultiCursor cursors={cursors} hoverItemClassName="hover-item" />
| string | optional | default: "multi-cursor--hover" hoverCursorClassName
Hover state className on each cursor.
It will be added whenever a cursor hover over .multi-cursor-item
<ReactMultiCursor
cursors={cursors}
hoverCursorClassName="myCustomCursor--hover"
/>
| function | optional onUpdate
Callback called after each position update. The argument will give you an array of cursors with their current position.
<ReactMultiCursor
cursors={cursors}
onUpdate={(c) => {
console.log("cursors", c)
}}
/>
| function | optional onClick
Click event callback. The arguments will give you the original event and the array of cursors with their position.
<ReactMultiCursor
cursors={cursors}
onClick={(e, c) => {
console.log("event", e)
console.log("cursors", c)
}}
/>
| function | optional onTouchStart
Touch start event callback. The arguments will give you the original event and the array of cursors with their position.
<ReactMultiCursor
cursors={cursors}
onTouchStart={(e, c) => {
console.log("event", e)
console.log("cursors", c)
}}
/>
| function | optional onTouchMove
Touch move event callback. The arguments will give you the original event and the array of cursors with their position.
<ReactMultiCursor
cursors={cursors}
onTouchMove={(e, c) => {
console.log("event", e)
console.log("cursors", c)
}}
/>
| function | optional onTouchCancel
Touch cancel event callback. The arguments will give you the original event and the array of cursors with their position.
<ReactMultiCursor
cursors={cursors}
onTouchCancel={(e, c) => {
console.log("event", e)
console.log("cursors", c)
}}
/>
| function | optional onTouchEnd
Touch end event callback. The arguments will give you the original event and the array of cursors with their position.
<ReactMultiCursor
cursors={cursors}
onTouchEnd={(e, c) => {
console.log("event", e)
console.log("cursors", c)
}}
/>