react-animated-polyline-cursor
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

React Animated Polyline Cursor

기본 커서를 커스텀 가능한 애니메이션 커서로 변경해주는 React Component입니다.
해당 Component는 함수형으로 제작되었습니다.


Contents

  1. Features
  2. Install
  3. Usage
  4. Options

Features

  • Custom cursor replaced by default cursor
  • Line effects that track the path the cursor has traveled
  • Cursor scale down effect on click
  • Cursor resizing effect when hovering over elements with 'c-cursor-hover' class defined

Other customizations include color, size, polyline-delay, polyline-length, marker-blend-mode, and more for circle, polyline, and marker.

Live Demo


Install

npm i react-animated-polyline-cursor

Usage

Add to global scope. (ex. App.ts)

import React from "react";
import CustomAnimatedCursor from "react-animated-polyline-cursor";

export default function App() {
    return (
        <div className="App">
            // It has default values, ​​and you can only override custom settings.
            <CustomAnimatedCursor
                dotColor={"#2AFADF"}
                lineColor={"#2AFADF"}
                markerColor={"#2AFADF"}
            />
            ...component
        </div>
    );
}

Hover Element (add 'c-cursor-hover' className)

export default function DemoContent() {
    return (
        <div>
            <div>
                <h1>Custom Animated Polyline Cursor</h1>
                <a href="#" className="c-cursor-hover">
                    Link Text.
                </a>
                <div className="c-cursor-hover">Hover Box</div>
                <div>
                    <label htmlFor="chk" className="c-cursor-hover">
                        Checkbox
                    </label>
                    <input type="checkbox" id="chk" />
                </div>
            </div>
        </div>
    );
}

Default Props

CustomAnimatedCursor.defaultProps = {
    dotColor: "#000",
    dotSize: 8,
    dotReductionRatio: 0.25,
    lineColor: "#000",
    lineDelay: 2,
    lineLength: 12,
    lineWidth: 2,
    markerSize: 24,
    markerColor: "#fff",
    removeCursorElements: ["a", "input", "label", "select", "textarea", "button"],
    markerBlendMode: true,
};

Props Types

export interface CursorTypes {
    dotColor: string;
    dotSize: number;
    dotReductionRatio: number;
    lineColor: string;
    lineDelay: number;
    lineLength: number;
    lineWidth: number;
    markerSize: number;
    markerColor: string;
    removeCursorElements: string[];
    markerBlendMode: boolean;
}

Options

Option Type Description Default
dotColor string Cursor color - rgb or hex #000
dotSize number Cursor size - Minimum 1 8
dotReductionRatio number Cursor reduction ratio - 0~1 0.25
lineColor string DrawLine color - rgb or hex #000
lineDelay number DrawLine delay to follow - Minimum 1 2
lineLength number DrawLine stretched length - Recommend 2~30 limit 12
lineWidth number DrawLine width - Minimum 1, Maximum "dotSize" 2
markerSize string HoveredMarker size - Minimum "dotSize" 24
markerColor string HoveredMarker color - rgb or hex #000
removeCursorElements array Remove default cursor from element - htmlTag, class, id ['a', 'input', 'label', 'select', 'textarea', 'button']
markerBlendMode boolean On/Off the Cursor blend mode - boolean true

Todos

  • Webpack to Vite Migration
  • Add Hovered Marker Click Action
  • Add Input Type Element Hovered Action
  • Create & Deploy NPM Package
  • Add more detailed cursor style editing
  • Changed input element cursor hovered design
  • Add SSR Mode
  • Source Refactoring

Package Sidebar

Install

npm i react-animated-polyline-cursor

Weekly Downloads

0

Version

1.0.3

License

MIT

Unpacked Size

55.2 kB

Total Files

6

Last publish

Collaborators

  • chlqhdtn