react-efficient-cursor

Efficient custom cursor for React Apps

Install

npm i react-efficient-cursor

yarn add react-efficient-cursor

pnpm add react-efficient-cursor

Usage

import { EfficientCursor } from 'react-efficient-cursor';

const MyCursor = () => {
  return (
    <EfficientCursor>
      <span>Your component</span>
    </EfficientCursor>
  );
};

Speed

To set the speed of the component following the cursor - simply pass a speed prop.

Ideal ranges are between 0 and 1.

<EfficientCursor speed={0.2} />

Styles

You can style the cursor by styling it just like a regular component, via style, className or you can just style inner component yourself.

<EfficientCursor className="my-custom-styles" style={{ '--offset-x': '1em' }} />

Interactions

You can pass a callback to onMove prop to retrieve all the informations about the cursor, e.g. its target or coordinates.

<EfficientCursor onMove={(e) => console.log(e)} />