1 | # React Spinners
|
2 |
|
3 | [![npm version](https://badge.fury.io/js/react-spinners.svg)][npm_url]
|
4 | [![circle ci](https://circleci.com/gh/davidhu2000/react-spinners.svg?style=shield)][ci_url]
|
5 | [![downloads](https://img.shields.io/npm/dt/react-spinners.svg)][npm_url]
|
6 | [![license](https://img.shields.io/npm/l/react-spinners.svg)][npm_url]
|
7 | [![Coverage Status](https://coveralls.io/repos/github/davidhu2000/react-spinners/badge.svg?branch=master)](https://coveralls.io/github/davidhu2000/react-spinners?branch=master)
|
8 |
|
9 | [![dependencies Status](https://david-dm.org/davidhu2000/react-spinners/status.svg)](https://david-dm.org/davidhu2000/react-spinners)
|
10 | [![devDependencies Status](https://david-dm.org/davidhu2000/react-spinners/dev-status.svg)](https://david-dm.org/davidhu2000/react-spinners?type=dev)
|
11 | [![peerDependencies Status](https://david-dm.org/davidhu2000/react-spinners/peer-status.svg)](https://david-dm.org/davidhu2000/react-spinners?type=peer)
|
12 |
|
13 | [npm_url]: https://www.npmjs.org/package/react-spinners
|
14 | [ci_url]: https://circleci.com/gh/davidhu2000/react-spinners
|
15 |
|
16 | A collection of loading spinners with React.js based on [Halogen](https://github.com/yuanyan/halogen).
|
17 |
|
18 | This package is bootstraped using [react-npm-boilerplate](https://github.com/juliancwirko/react-npm-boilerplate)
|
19 |
|
20 | ## Demo
|
21 |
|
22 | [Demo Page](https://www.davidhu.io/react-spinners)
|
23 |
|
24 | ## Installation
|
25 |
|
26 | With Yarn:
|
27 |
|
28 | ```bash
|
29 | yarn add react-spinners
|
30 | ```
|
31 |
|
32 | With npm:
|
33 |
|
34 | ```bash
|
35 | npm install --save react-spinners
|
36 | ```
|
37 |
|
38 | ## Usage
|
39 |
|
40 | Each loader has their own default properties. You can overwrite the defaults by passing props into the loaders.
|
41 |
|
42 | Each loader accepts a `loading` prop as a boolean. The loader will render `null` if `loading` is `false`.
|
43 |
|
44 | **IMPORTANT**: This package uses [emotion](https://github.com/emotion-js/emotion). Remember to add the plugin to `.babelrc`, for example:
|
45 |
|
46 | ```
|
47 | {
|
48 | "presets": ["@babel/preset-react", "@babel/preset-env"],
|
49 | "plugins": ["@emotion"]
|
50 | }
|
51 | ```
|
52 |
|
53 | ### Example
|
54 |
|
55 | ```js
|
56 | import { useState } from "react";
|
57 | import { css } from "@emotion/react";
|
58 | import ClipLoader from "react-spinners/ClipLoader";
|
59 |
|
60 | // Can be a string as well. Need to ensure each key-value pair ends with ;
|
61 | const override = css`
|
62 | display: block;
|
63 | margin: 0 auto;
|
64 | border-color: red;
|
65 | `;
|
66 |
|
67 | function App() {
|
68 | let [loading, setLoading] = useState(true);
|
69 | let [color, setColor] = useState("#ffffff");
|
70 |
|
71 | return (
|
72 | <div className="sweet-loading">
|
73 | <button onClick={() => setLoading(!loading)}>Toggle Loader</button>
|
74 | <input value={color} onChange={(input) => setColor(input.target.value)} placeholder="Color of the loader" />
|
75 |
|
76 | <ClipLoader color={color} loading={loading} css={override} size={150} />
|
77 | </div>
|
78 | );
|
79 | }
|
80 |
|
81 | export default App;
|
82 | ```
|
83 |
|
84 | <details><summary>Example using React Class</summary>
|
85 |
|
86 | ```js
|
87 | import React from "react";
|
88 | import { css } from "@emotion/react";
|
89 | import ClipLoader from "react-spinners/ClipLoader";
|
90 |
|
91 | // Can be a string as well. Need to ensure each key-value pair ends with ;
|
92 | const override = css`
|
93 | display: block;
|
94 | margin: 0 auto;
|
95 | border-color: red;
|
96 | `;
|
97 |
|
98 | class AwesomeComponent extends React.Component {
|
99 | constructor(props) {
|
100 | super(props);
|
101 | this.state = {
|
102 | loading: true
|
103 | };
|
104 | }
|
105 |
|
106 | render() {
|
107 | return (
|
108 | <div className="sweet-loading">
|
109 | <ClipLoader css={override} size={150} color={"#123abc"} loading={this.state.loading} speedMultiplier={1.5} />
|
110 | </div>
|
111 | );
|
112 | }
|
113 | }
|
114 | ```
|
115 |
|
116 | </details>
|
117 |
|
118 | ## Available Loaders, PropTypes, and Default Values
|
119 |
|
120 | Common default props for all loaders:
|
121 |
|
122 | ```js
|
123 | loading: true;
|
124 | color: "#000000";
|
125 | css: "";
|
126 | speedMultiplier: 1;
|
127 | ```
|
128 |
|
129 | ### `color` prop
|
130 |
|
131 | `color` prop accepts a color hash in the format of `#XXXXXX` or `#XXX`. It also accepts basic colors listed below:
|
132 |
|
133 | > maroon, red, orange, yellow, olive, green, purple, white,
|
134 | > fuchsia, lime, teal, aqua, blue, navy, black, gray, silver
|
135 |
|
136 | ### `css` prop
|
137 |
|
138 | `css` works exactly like the `css` works with the emotion package.
|
139 | You can directly write your css in css syntax without the dirty camelCase css in jss syntax.
|
140 | We recommend you to use this awesome library in your project. It supports Server side rendering with HTTP2 Stream!
|
141 | More info about using `css` [here](https://emotion.sh/docs/introduction)
|
142 |
|
143 | ### `size`, `height`, `width`, and `radius` props
|
144 |
|
145 | The input to these props can be _number_ or _string_.
|
146 |
|
147 | - If value is number, the loader will default to css unit `px`.
|
148 | - If value is string, the loader will verify the unit against valid css units.
|
149 | - If unit is valid, return the original value
|
150 | - If unit is invalid, output warning console log and default to `px`.
|
151 |
|
152 | The table below has the default values for each loader.
|
153 |
|
154 | | Loader | size | height | width | radius | margin |
|
155 | | ----------------: | :--: | :----: | :---: | :----: | :----: |
|
156 | | BarLoader | | `4` | `100` | |
|
157 | | BeatLoader | `15` | | | | `2` |
|
158 | | BounceLoader | `60` | | | |
|
159 | | CircleLoader | `50` | | | |
|
160 | | ClimbingBoxLoader | `15` | | | |
|
161 | | ClipLoader | `35` | | | |
|
162 | | ClockLoader | `50` | | | |
|
163 | | DotLoader | `60` | | | | `2` |
|
164 | | FadeLoader | | `15` | `5` | `2` | `2` |
|
165 | | GridLoader | `15` | | | |
|
166 | | HashLoader | `50` | | | | `2` |
|
167 | | MoonLoader | `60` | | | | `2` |
|
168 | | PacmanLoader | `25` | | | | `2` |
|
169 | | PropagateLoader | `15` | | | |
|
170 | | PuffLoader | `60` | | | |
|
171 | | PulseLoader | `15` | | | | `2` |
|
172 | | RingLoader | `60` | | | | `2` |
|
173 | | RiseLoader | `15` | | | | `2` |
|
174 | | RotateLoader | `15` | | | | `2` |
|
175 | | ScaleLoader | | `35` | `4` | `2` | `2` |
|
176 | | SyncLoader | `15` | | | | `2` |
|