@skits/react-cursor

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

License: MIT
Author: @samwyness