https://github.com/psparwez/react-hot-spinner
A customizable spinner component for React
https://github.com/psparwez/react-hot-spinner
react-hot-spinner react-spinner react-spinner-loader react-spinners spinner spinners-react
Last synced: 3 months ago
JSON representation
A customizable spinner component for React
- Host: GitHub
- URL: https://github.com/psparwez/react-hot-spinner
- Owner: psparwez
- License: mit
- Created: 2025-05-07T01:35:00.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-28T10:40:37.000Z (10 months ago)
- Last Synced: 2025-10-04T10:52:49.123Z (9 months ago)
- Topics: react-hot-spinner, react-spinner, react-spinner-loader, react-spinners, spinner, spinners-react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-hot-spinner
- Size: 178 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-hot-spinner
A customizable spinner component for React applications with TypeScript support.
## Installation
```bash
npm install react-hot-spinner
# or
yarn add react-hot-spinner
```
## Usage
```jsx
import React from 'react';
import { Spinner } from 'react-hot-spinner';
function App() {
return (
Loading Example
);
}
export default App;
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `string \| number` | `'50px'` | Size of the spinner. If a number is provided, it will be treated as pixels. |
| `color` | `white \| black \| string` | `'#f0f0f0'` | Color of the spinner blades. |
| `className` | `string` | `''` | Additional CSS class name(s) to apply to the spinner container. |
| `center` | `boolean` | `false` | Center the spinner in its parent container. |
## Examples
### Basic Usage
```jsx
import { Spinner } from 'react-hot-spinner';
// Default spinner
// Custom size (in pixels)
// Custom size (with CSS units)
// Custom color
// Centered in parent
// With custom class name
// Combining multiple props
```
## Development
```bash
# Install dependencies
npm install
# Build the package
npm run build
# Watch mode
npm run dev
# Run tests
npm test
```
## License
MIT