# react-animated-polyline-cursor
> Custom animated(drawLine) cursor by react functional component.
Latest version **1.0.3** (published 2023-09-04) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-animated-polyline-cursor
pnpm add react-animated-polyline-cursor
yarn add react-animated-polyline-cursor
bun add react-animated-polyline-cursor
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.3 |
| Published | 2023-09-04 |
| First published | 2023-09-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 53.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Bongsu Choi |
| Maintainers | chlqhdtn |
| Keywords | cursor, react cursor, custom cursor, animated cursor, polyline cursor, drawLine cursor |
## Links
- npm: https://www.npmjs.com/package/react-animated-polyline-cursor
- Repository: https://github.com/BongSuCHOI/react-animated-polyline-cursor
- Homepage: https://bongsuchoi.github.io/react-animated-polyline-cursor/
- Issues: https://github.com/BongSuCHOI/react-animated-polyline-cursor/issues
- npm.io page: https://npm.io/package/react-animated-polyline-cursor
## Dependencies (4)
- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [@types/react](https://npm.io/package/@types/react.md) ^18.2.21
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.2.7
## Alternatives
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads
- [cra-template-particles-typescript](https://npm.io/package/cra-template-particles-typescript.md) — 227 weekly downloads
## Recent versions
- 1.0.3 (latest) — 2023-09-04
- 1.0.2 — 2023-09-04
- 1.0.1 — 2023-09-04
## README
# React Animated Polyline Cursor
기본 커서를 커스텀 가능한 애니메이션 커서로 변경해주는 React Component입니다.
해당 Component는 함수형으로 제작되었습니다.
## Contents
1. [Features](#features)
2. [Install](#install)
3. [Usage](#usage)
4. [Options](#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](https://bongsuchoi.github.io/react-animated-polyline-cursor/)
## 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 (
// It has default values, and you can only override custom settings.
...component
);
}
```
**Hover Element (add 'c-cursor-hover' className)**
```jsx
export default function DemoContent() {
return (
);
}
```
### Default Props
```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,
};
```
### Props Types
```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
---
_Source: https://npm.io/package/react-animated-polyline-cursor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._