Class Cursor

A customizable custom cursor component with smooth animations and hover interactions. Supports dynamic appearance changes and enhanced user interaction.

Documentation

Hierarchy (View Summary)

Constructors

constructor

Accessors

callbacks container coords domContainer hoveredElement initialHeight initialWidth inner isDestroyed name outer path prefix props targetCoords

Methods

_addTempClassName _cn _destroy _getMutable _getStatic _handleProps attachCursor attachHover destroy on onDestroy render updateProps

Constructors

constructor

  • new Cursor(
        props?: ICursorStaticProps & ICursorMutableProps & Partial<
            {
                onDestroy: (data: undefined, ctx: Cursor) => void;
                onHoverEnter: (data: CursorHoverElement, ctx: Cursor) => void;
                onHoverLeave: (data: CursorHoverElement, ctx: Cursor) => void;
                onNoType: (data: undefined, ctx: Cursor) => void;
                onProps: (data: Partial, ctx: Cursor) => void;
                onRender: (data: undefined, ctx: Cursor) => void;
                onTypeHide: (data: ICursorType, ctx: Cursor) => void;
                onTypeShow: (data: ICursorType, ctx: Cursor) => void;
            },
        >,
        onCallbacks?: Partial<
            {
                onDestroy: (data: undefined, ctx: Cursor) => void;
                onHoverEnter: (data: CursorHoverElement, ctx: Cursor) => void;
                onHoverLeave: (data: CursorHoverElement, ctx: Cursor) => void;
                onNoType: (data: undefined, ctx: Cursor) => void;
                onProps: (data: Partial, ctx: Cursor) => void;
                onRender: (data: undefined, ctx: Cursor) => void;
                onTypeHide: (data: ICursorType, ctx: Cursor) => void;
                onTypeShow: (data: ICursorType, ctx: Cursor) => void;
            },
        >,
    ): Cursor

    Parameters

    • Optionalprops: ICursorStaticProps & ICursorMutableProps & Partial<
          {
              onDestroy: (data: undefined, ctx: Cursor) => void;
              onHoverEnter: (data: CursorHoverElement, ctx: Cursor) => void;
              onHoverLeave: (data: CursorHoverElement, ctx: Cursor) => void;
              onNoType: (data: undefined, ctx: Cursor) => void;
              onProps: (data: Partial, ctx: Cursor) => void;
              onRender: (data: undefined, ctx: Cursor) => void;
              onTypeHide: (data: ICursorType, ctx: Cursor) => void;
              onTypeShow: (data: ICursorType, ctx: Cursor) => void;
          },
      >
    • OptionalonCallbacks: Partial<
          {
              onDestroy: (data: undefined, ctx: Cursor) => void;
              onHoverEnter: (data: CursorHoverElement, ctx: Cursor) => void;
              onHoverLeave: (data: CursorHoverElement, ctx: Cursor) => void;
              onNoType: (data: undefined, ctx: Cursor) => void;
              onProps: (data: Partial, ctx: Cursor) => void;
              onRender: (data: undefined, ctx: Cursor) => void;
              onTypeHide: (data: ICursorType, ctx: Cursor) => void;
              onTypeShow: (data: ICursorType, ctx: Cursor) => void;
          },
      >

    Returns Cursor

Accessors

callbacks

container

coords

domContainer

hoveredElement

  • get hoveredElement(): undefined | CursorHoverElement

    The currently hovered element. Stores information about the element that the cursor is currently interacting with.

    Returns undefined | CursorHoverElement

initialHeight

initialWidth

inner

  • get inner(): HTMLElement

    The inner element of the custom cursor. This element is nested inside the outer element and can provide additional styling.

    Returns HTMLElement

isDestroyed

  • get isDestroyed(): boolean

    Checks if the module has been destroyed.

    Returns boolean

name

  • get name(): string

    The name of the module, derived from the class name

    Returns string

outer

  • get outer(): HTMLElement

    The outer element of the custom cursor. This is the visual element that represents the cursor on screen.

    Returns HTMLElement

path

prefix

props

targetCoords

Methods

Protected_addTempClassName

  • _addTempClassName(element: Element, className: string): void

    Adds a class name on an element, and keeps track of it for removal when the module is destroyed.

    Parameters

    • element: Element

      The target DOM element.

    • className: string

      The class name to toggle.

    Returns void

Protected_cn

  • _cn(...classNames: string[]): string

    Helper function to generate classnames with the module's prefix.

    Parameters

    • ...classNames: string[]

      The class names to generate.

    Returns string

    A string of class names with the module's prefix applied.

Protected_destroy

  • _destroy(): void

    Internal method to handle the destruction of the module. It removes all callbacks, destroys properties, and cleans up event listeners and class names.

    Returns void

_getMutable

  • _getMutable(): {
        __mutableProp: true;
        autoStop: boolean;
        enabled: boolean;
        height: string
        | number;
        lerp: number;
        width: string | number;
    }

    Get default mutable properties

    Returns {
        __mutableProp: true;
        autoStop: boolean;
        enabled: boolean;
        height: string | number;
        lerp: number;
        width: string | number;
    }

    • __mutableProp: true
    • autoStop: boolean

      Stops rendering the cursor automatically when its coordinates and size closely match the target values.

      Default

      true
    • enabled: boolean

      Enables or disables the custom cursor interactions.

      Default

      true
    • height: string | number

      The initial height of the custom cursor. Supports css units like px, rem, vw, vh, svh.

      Default

      50
    • lerp: number

      Linear interpolation factor for smooth cursor movement. The value must be between 0 and 1, with higher values indicating faster movement.

      Default

      0.2
    • width: string | number

      The initial width of the custom cursor. Supports css units like px, rem, vw, vh, svh.

      Default

      50

_getStatic

  • _getStatic(): {
        __staticProp: true;
        append: boolean;
        behavior: "path"
        | "default";
        container: Element | Window;
        hideNative: boolean;
        transformModifier: (coords: ICursorFullCoords) => string;
    }

    Get default static properties

    Returns {
        __staticProp: true;
        append: boolean;
        behavior: "path" | "default";
        container: Element | Window;
        hideNative: boolean;
        transformModifier: (coords: ICursorFullCoords) => string;
    }

    • __staticProp: true
    • append: boolean

      Appends the custom cursor to the container. Use false if you need only cursor logic and interactions.

      Default

      true
    • behavior: "path" | "default"

      Cursor behavior

      Default

      'default'
    • container: Element | Window

      The container where the custom cursor is active. Use window for full-window activation.

      Default

      window
    • hideNative: boolean

      Hides the native cursor if set to true.

      Default

      false
    • transformModifier: (coords: ICursorFullCoords) => string

      Modifier for the cursor transform.

      Default

      (coords) => translate(${coords.x}px, ${coords.y}px)

Protected_handleProps

attachCursor

attachHover

destroy

on

onDestroy

  • onDestroy(action: () => void): void

    Adds a callback on the module's destruction.

    Parameters

    • action: () => void

      The function to execute during destruction.

    Returns void

render

updateProps

Settings

Member Visibility

On This Page

Constructors
Accessors
Methods