npmpackage.info

Gathering detailed insights and metrics for react-spinners

react-spinners

A collection of loading spinner components for react

0.14.1

3,123

MIT

TypeScript

6.33 kB

60,636,134 4

Installations

npm install react-spinners

Pull Requests

Open

6

Total

485

Closed

241

Merged

238

Issues

Open

16

Total

126

Closed

110

Releases

0.14.1

Published on 26 Jun 2024

0.14.0

Published on 26 Jun 2024

v0.13.8

Published on 19 Jan 2023

0.13.7

Published on 03 Dec 2022

0.13.0

Published on 25 Jun 2022

0.12.0

Published on 16 May 2022

View all 16 releases

Developer

davidhu2000

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

20.7.0

NPM Version

10.1.0 Statistics

3,123 Stars

776 Commits

269 Forks

17 Watching

6 Branches

20 Contributors

Updated on 28 Nov 2024

Bundle Size

42.08 kB

Minified

6.33 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (88.35%)

JavaScript (6.28%)

Ruby (5.26%)

Shell (0.11%)

Total Downloads

Cumulative downloads

Total Downloads

60,636,134

Last day

-4.5%

77,016

Compared to previous day

Last week

3.6%

425,798

Compared to previous week

Last month

10.8%

1,772,483

Compared to previous month

Last year

22.2%

17,893,439

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

React Spinners

Dependency Count Types Included Tree Shaking Supported

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:

1yarn add react-spinners

With npm:

1npm install --save react-spinners

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

1import { useState, CSSProperties } from "react";
2import ClipLoader from "react-spinners/ClipLoader";
3
4const override: CSSProperties = {
5  display: "block",
6  margin: "0 auto",
7  borderColor: "red",
8};
9
10function App() {
11  let [loading, setLoading] = useState(true);
12  let [color, setColor] = useState("#ffffff");
13
14  return (
15    <div className="sweet-loading">
16      <button onClick={() => setLoading(!loading)}>Toggle Loader</button>
17      <input value={color} onChange={(input) => setColor(input.target.value)} placeholder="Color of the loader" />
18
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}
30
31export default App;

Example using React Class

1import React from "react";
2import ClipLoader from "react-spinners/ClipLoader";
3
4const override: React.CSSProperties = {
5  display: "block",
6  margin: "0 auto",
7  borderColor: "red",
8};
9
10class AwesomeComponent extends React.Component {
11  constructor(props) {
12    super(props);
13    this.state = {
14      loading: true,
15    };
16  }
17
18  render() {
19    return (
20      <div className="sweet-loading">
21        <ClipLoader
22          cssOverride={override}
23          size={150}
24          color={"#123abc"}
25          loading={this.state.loading}
26          speedMultiplier={1.5}
27          aria-label="Loading Spinner"
28          data-testid="loader"
29        />
30      </div>
31    );
32  }
33}

Available Loaders, PropTypes, and Default Values

Common default props for all loaders:

loading: true;
color: "#000000";
cssOverride: {}
speedMultiplier: 1;

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.

Loader	size	height	width	radius	margin
BarLoader		`4`	`100`
BeatLoader	`15`				`2`
BounceLoader	`60`
CircleLoader	`50`
ClimbingBoxLoader	`15`
ClipLoader	`35`
ClockLoader	`50`
DotLoader	`60`				`2`
FadeLoader		`15`	`5`	`2`	`2`
GridLoader	`15`
HashLoader	`50`				`2`
MoonLoader	`60`				`2`
PacmanLoader	`25`				`2`
PropagateLoader	`15`
PuffLoader	`60`
PulseLoader	`15`				`2`
RingLoader	`60`				`2`
RiseLoader	`15`				`2`
RotateLoader	`15`				`2`
ScaleLoader		`35`	`4`	`2`	`2`
SyncLoader	`15`				`2`

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

10

License

Determines if the project has defined a license.

2

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

4

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

react-spinners

Installations

Pull Requests

6

485

241

238

Issues

16

126

110

Releases

Developer

Developer Guide

CommonJS

Yes

20.7.0

10.1.0

Statistics

Bundle Size

42.08 kB

6.33 kB

Languages

Total Downloads

60,636,134

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

React Spinners

Demo

Installation

Usage

Example

Available Loaders, PropTypes, and Default Values

color prop

cssOverride prop

size, height, width, and radius props

10

10

10

10

2

0

0

0

0

0

0

0

4

/10

`color` prop

`cssOverride` prop

`size`, `height`, `width`, and `radius` props