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