react-hot-spinner

A customizable spinner component for React applications with TypeScript support.

Installation

npm install react-hot-spinner
# or
yarn add react-hot-spinner

Usage

import React from 'react';
import { Spinner } from 'react-hot-spinner';

function App() {
  return (
    <div className="app">
      <h1>Loading Example</h1>
      <Spinner/>
    </div>
  );
}

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

import { Spinner } from 'react-hot-spinner';

// Default spinner
<Spinner />

// Custom size (in pixels)
<Spinner size={100} />

// Custom size (with CSS units)
<Spinner size="5rem" />

// Custom color
<Spinner color="#ff0000" />

// Centered in parent
<Spinner center />

// With custom class name
<Spinner className="my-custom-spinner" />

// Combining multiple props
<Spinner size={80} color="#3498db" center className="loading-indicator" />

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch mode
npm run dev

# Run tests
npm test

License

MIT