custom-cursor-js

Use any image or GIF as a custom cursor for your website.

Installation

npm install custom-cursor-js

Usage

Basic Usage

import CustomCursor from 'custom-cursor-js';

const cursor = new CustomCursor({
  cursorSrc: './path/to/your/cursor.gif',
});

With Options

const cursor = new CustomCursor({
  cursorSrc: 'https://example.com/cursor.gif',
  fallbackCursor: 'pointer',
  cursorSize: 32,
  cursorXOffset: 0,
  cursorYOffset: 0,
  hideDefaultCursor: true,
});

Change Cursor Dynamically

cursor.setCursor('./path/to/another-cursor.gif');

Destroy Cursor

cursor.destroy();

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | cursorSrc | string | '' | URL or path to cursor image | | fallbackCursor | string | 'pointer' | Fallback cursor type | | cursorSize | number | 32 | Size of cursor in pixels | | cursorXOffset | number | 0 | X offset from mouse position | | cursorYOffset | number | 0 | Y offset from mouse position | | hideDefaultCursor | boolean | true | Hide default system cursor |

Browser Support

Works in all modern browsers that support CSS custom properties.