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)

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

export default function App() {
return (


`jsx
export default function DemoContent() {
return (


`ts
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,
};
`

$3

`ts
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