React Spinners

A collection of loading spinner components for react

Progress / SpinnerReact
davidhu2000/react-spinnerswww.davidhu.io/react-spinnersreact-spinners

README

React Spinners

[npm version][npm_url] [downloads][npm_url] [license][npm_url]


Coverage Status
Dependency Count
Types Included
Tree Shaking Supported

[npm_url]: https://www.npmjs.org/package/react-spinners

A collection of loading spinners with React.js based on Halogen.

This package is bootstraped using react-npm-boilerplate

Demo


Demo Page

Storybook

Installation


With Yarn:

  1. ``` sh
  2. yarn add react-spinners
  3. ```

With npm:

  1. ``` sh
  2. npm install --save react-spinners
  3. ```

Usage


Each loader has their own default properties. You can overwrite the defaults by passing props into the loaders.

Each loader accepts a loading prop as a boolean. The loader will render null if loading is false.

Example


  1. ```tsx
  2. import { useState, CSSProperties } from "react";
  3. import ClipLoader from "react-spinners/ClipLoader";

  5. const override: CSSProperties = {
  6.   display: "block",
  7.   margin: "0 auto",
  8.   borderColor: "red",
  9. };

  11. function App() {
  12.   let [loading, setLoading] = useState(true);
  13.   let [color, setColor] = useState("#ffffff");

  15.   return (
  16.     <div className="sweet-loading">
  17.       <button onClick={() => setLoading(!loading)}>Toggle Loader</button>
  18.       <input value={color} onChange={(input) => setColor(input.target.value)} placeholder="Color of the loader" />
  19. <ClipLoader
  20.         color={color}
  21.         loading={loading}
  22.         cssOverride={override}
  23.         size={150}
  24.         aria-label="Loading Spinner"
  25.         data-testid="loader"
  26.       />
  27.     </div>
  28.   );
  29. }

  31. export default App;
  32. ```

Example using React Class

  1. ```tsx
  2. import React from "react";
  3. import ClipLoader from "react-spinners/ClipLoader";

  5. const override: React.CSSProperties = {
  6.   display: "block",
  7.   margin: "0 auto",
  8.   borderColor: "red",
  9. };

  11. class AwesomeComponent extends React.Component {
  12.   constructor(props) {
  13.     super(props);
  14.     this.state = {
  15.       loading: true,
  16.     };
  17.   }

  19.   render() {
  20.     return (
  21.       <div className="sweet-loading">
  22.         <ClipLoader
  23.           cssOverride={override}
  24.           size={150}
  25.           color={"#123abc"}
  26.           loading={this.state.loading}
  27.           speedMultiplier={1.5}
  28.           aria-label="Loading Spinner"
  29.           data-testid="loader"
  30.         />
  31.       </div>
  32.     );
  33.   }
  34. }
  35. ```


Available Loaders, PropTypes, and Default Values


Common default props for all loaders:

  1. ```
  2. loading: true;
  3. color: "#000000";
  4. cssOverride: {}
  5. speedMultiplier: 1;
  6. ```

All valid HTML props such as `aria- and data-` props are fully supported.

color prop


color prop accepts a color hash in the format of #XXXXXX or #XXX. It also accepts basic colors listed below:

maroon, red, orange, yellow, olive, green, purple, white,

fuchsia, lime, teal, aqua, blue, navy, black, gray, silver


cssOverride prop


The cssOverride prop is an object of camelCase styles used to create inline styles on the loaders. Any html css property is valid here.

size, height, width, and radius props


The input to these props can be _number_ or _string_.

- If value is number, the loader will default to css unit px.
- If value is string, the loader will verify the unit against valid css units.
  - If unit is valid, return the original value
  - If unit is invalid, output warning console log and default to px.

The table below has the default values for each loader.

Loadersizeheightwidthradiusmargin
----------------::--::----::---::----::----:
BarLoader|`100`|
BeatLoader`15`||
BounceLoader`60`||
CircleLoader`50`||
ClimbingBoxLoader`15`||
ClipLoader`35`||
ClockLoader`50`||
DotLoader`60`||
FadeLoader|`5``2``2`
GridLoader`15`||
HashLoader`50`||
MoonLoader`60`||
PacmanLoader`25`||
PropagateLoader`15`||
PuffLoader`60`||
PulseLoader`15`||
RingLoader`60`||
RiseLoader`15`||
RotateLoader`15`||
ScaleLoader|`4``2``2`
SyncLoader`15`||