React Spinner Toolkit

A Customizable Loading Spinner Library for React Applications

A customizable loading spinner toolkit for React applications. The react-spinner-toolkit provides a variety of shapes and animations to enhance the user experience during loading states.

Table of Contents

React Spinner Toolkit - A Customizable Loading Spinner Library for React Applications
- Table of Contents
- Demo
- Features
- Installation
- Usage
- Props
- Contributing
- License

Demo

This is a simple Demo environment for the package where you can use and test the various spinners.

Features

Multiple spinner shapes (e.g., circle, square).
Customizable size and color.
Different animation types (e.g., bounce, spin).
Lightweight and easy to use.

Installation

To install the react-spinner-toolkit, use either npm or yarn:

# Using npm
npm install react-spinner-toolkit

# Using yarn
yarn add react-spinner-toolkit

Usage

To use the React Spinner Toolkit in your React application, follow these steps:

Import the React Spinner Toolkit

Start by importing the React Spinner Toolkit from the react-spinner-toolkit package:
```
import { Spinner } from "react-spinner-toolkit";
```
Add the Spinner to Your Component

You can then include the Spinner in your component's render method. Here's a simple example:
```
function App() {
  return (
    <div style={{ textAlign: "center", margin: "50px" }}>
      <h1>Loading...</h1>
      <Spinner
        size={60}
        color="#007aff"
        loading={true}
        animationType="bounce"
        shape="circle"
      />
    </div>
  );
}
```
In this example:
- The size prop sets the size of the spinner to 60 pixels.
- The color prop specifies the spinner's color as #007aff.
- The loading prop indicates that the spinner should be displayed.
- The animationType prop is set to bounce, creating a bouncing animation effect.
- The shape prop defines the spinner's shape as a circle.

Props

The React Spinner Toolkit accepts the following props:

Prop	Type	Description
`size`	`number`	The size of the spinner (in pixels).
`color`	`string`	The color of the spinner (CSS color format).
`loading`	`boolean`	Controls the visibility of the spinner.
`animationType`	`string`	The type of animation for the spinner (`bounce`, `spin`, etc.).
`shape`	`string`	The shape of the spinner (`circle`, `square`, etc.).

Contributing

Contributions are welcome! If you have suggestions or improvements, please create an issue or submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Mohammed Nazm

mohammadnazm/react-spinner-toolkit

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Packages