# @skits/react-cursor

> React animated cursor component

Latest version **1.0.1** (published 2021-12-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @skits/react-cursor
pnpm add @skits/react-cursor
yarn add @skits/react-cursor
bun add @skits/react-cursor
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-12-06 |
| First published | 2021-12-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 21 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | samwyness |
| Maintainers | samwyness |
| Keywords | react cursor, react animated cursor, react animated cursor component, react, typescript, skits-lab |

## Links

- npm: https://www.npmjs.com/package/@skits/react-cursor
- Repository: https://github.com/skits-lab/react-cursor
- Homepage: https://github.com/skits-lab/react-cursor#readme
- Issues: https://github.com/skits-lab/react-cursor/issues
- npm.io page: https://npm.io/package/@skits/react-cursor

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2021-12-06
- 1.0.0 — 2021-12-06

## README

# React Cursor

Lightweight zero dependency React Cursor component.

Use the provided `Cursor` component, to add a animated cursor to your website.

## Installation

```sh
npm i @skits/react-cursor
```

## Usage

#### Basic example

```jsx
import Cursor from '@skits/react-cursor';

export default function App() {
  return (
    <div className="app">
      <Cursor />
    </div>
  );
}
```

#### Example with props

```jsx
import Cursor from '@skits/react-cursor';

export default function App() {
  return (
    <div className="app">
      <Cursor
        size={40}
        color="red"
        opacity={0.3}
        radius="50%" // circle
        zIndex={-1} // use negative zIndex to place cursor below other elements
        className="custom-cursor-class"
      />
    </div>
  );
}
```

#### Scale shape element on click

```jsx
import Cursor from '@skits/react-cursor';

export default function App() {
  return (
    <div className="app">
      <Cursor
        size={40}
        onMouseDown={(cursorElement, shapeElement) => {
          shapeElement.style.transform = 'scale(1.5)';
        }}
        onMouseUp={(cursorElement, shapeElement) => {
          shapeElement.style.transform = 'scale(1)';
        }}
      />
    </div>
  );
}
```

## Props

Flexible component API for customisations to suit your needs

| Prop          | Type     | Description                                                                                        | Default  |
| ------------- | -------- | -------------------------------------------------------------------------------------------------- | -------- |
| `size`        | number   | rgb value                                                                                          | `40`     |
| `color`       | string   | rgb value                                                                                          | `1`      |
| `opacity`     | number   | amount of alpha transparency for outer cursor dot                                                  | `red`    |
| `radius`      | number   | Size (px) of inner cursor dot                                                                      | `50%`    |
| `zIndex`      | number   | Size (px) of outer cursor outline                                                                  | `999999` |
| `className`   | string   | amount dot scales on click or link hover                                                           | `-`      |
| `onMouseDown` | function | Callback that fires on a `window.mousedown` event.<br />e.g. `(cursorElement, shapeElement) => {}` | `-`      |
| `onMouseUp`   | function | Callback that fires on a `window.mouseup` event.<br />e.g. `(cursorElement, shapeElement) => {}`   | `-`      |

---

License: MIT<br/>
Author: [@samwyness](https://github.com/samwyness)

---
_Source: https://npm.io/package/@skits/react-cursor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._