1.0.1 • Published 2 years ago
@skits/react-cursor v1.0.1
React Cursor
Lightweight zero dependency React Cursor component.
Use the provided Cursor
component, to add a animated cursor to your website.
Installation
npm i @skits/react-cursor
Usage
Basic example
import Cursor from '@skits/react-cursor';
export default function App() {
return (
<div className="app">
<Cursor />
</div>
);
}
Example with props
import Cursor from '@skits/react-cursor';
export default function App() {
return (
<div className="app">
<Cursor
size={40}
color="red"
opacity={0.3}
radius="50%" // circle
zIndex={-1} // use negative zIndex to place cursor below other elements
className="custom-cursor-class"
/>
</div>
);
}
Scale shape element on click
import Cursor from '@skits/react-cursor';
export default function App() {
return (
<div className="app">
<Cursor
size={40}
onMouseDown={(cursorElement, shapeElement) => {
shapeElement.style.transform = 'scale(1.5)';
}}
onMouseUp={(cursorElement, shapeElement) => {
shapeElement.style.transform = 'scale(1)';
}}
/>
</div>
);
}
Props
Flexible component API for customisations to suit your needs
Prop | Type | Description | Default |
---|---|---|---|
size | number | rgb value | 40 |
color | string | rgb value | 1 |
opacity | number | amount of alpha transparency for outer cursor dot | red |
radius | number | Size (px) of inner cursor dot | 50% |
zIndex | number | Size (px) of outer cursor outline | 999999 |
className | string | amount dot scales on click or link hover | - |
onMouseDown | function | Callback that fires on a window.mousedown event.e.g. (cursorElement, shapeElement) => {} | - |
onMouseUp | function | Callback that fires on a window.mouseup event.e.g. (cursorElement, shapeElement) => {} | - |
License: MIT Author: @samwyness