https://github.com/react-sandbox/cursor-loader
🖱️ Cursor loader
https://github.com/react-sandbox/cursor-loader
component cursor-loader loader react react-cursor typescript
Last synced: 3 months ago
JSON representation
🖱️ Cursor loader
- Host: GitHub
- URL: https://github.com/react-sandbox/cursor-loader
- Owner: react-sandbox
- License: mit
- Created: 2023-06-25T20:43:23.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-15T22:34:53.000Z (over 1 year ago)
- Last Synced: 2025-02-09T19:45:53.464Z (3 months ago)
- Topics: component, cursor-loader, loader, react, react-cursor, typescript
- Language: TypeScript
- Homepage:
- Size: 1.29 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
@react-sandbox/cursor-loader
🖱️ Cursor loader component.
## Usage
### Install
Install the `@react-sandbox/cursor-loader` package:
```
npm install @react-sandbox/cursor-loader
```
### Import
Import the `CursorLoader` component:
```tsx
import React, { useState } from 'react'
import CursorLoader from '@react-sandbox/cursor-loader'
function App() {
const [load, setLoad] = useState(0)
return (
)
}
```
### Props
| Prop | Type | Default | Description |
| ------------ | ------------------------------- | ------------ | --------------------------------- |
| `load` | `number` | **required** | Load/progress (between 0 and 100) |
| `color` | `string` | `'#01D45B'` | Color of loader |
| `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Size of loader |
| `trailDelay` | `0 \| 100 \| 200 \| 300 \| 500` | `300` | Cursor trail delay |
| `onComplete` | `function` | `-` | Callback function on completion |
| `className` | `string` | `-` | CSS classes |
| `style` | `React.CSSProperties` | `-` | CSS styles |
## Development
### Local
```
pnpm install
pnpm dev
```
### Tests
```
pnpm test
```
### Example
Inside `test/`:
```
pnpm install
pnpm dev
```
## License
MIT