Registry / web-framework / react-loading

react-loading

library2.0.3jsnpmunverified

react-loading provides a collection of easy-to-use, customizable loading animations for React applications. It leverages SVG animations adapted from Brent Jackson's `loading` project, offering a variety of types such as 'balls', 'bars', 'bubbles', and 'spin'. The current stable version is 2.0.3. The package has a somewhat sporadic release cadence, with updates addressing bug fixes and minor enhancements, rather than frequent new features. Its primary differentiators include the diverse range of aesthetically pleasing SVG-based animations and straightforward prop-based customization for color, size, and delay, making it a convenient choice for integrating visual loading states into React UIs without external stylesheets or complex setup.

web-framework

github ↗package ↗

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Primarily designed for ESM usage in modern React projects. While CommonJS `require` might work in some build setups, it's not the idiomatic way.

import ReactLoading from 'react-loading';

Demonstrates importing and rendering a `ReactLoading` component with dynamic type and color props, including styling for display.

import React from 'react'; import ReactLoading from 'react-loading'; const LoadingSpinner = ({ type, color, size = '64px' }) => { // Example usage for different loading types and dynamic sizing const loadingTypes = ['balls', 'spin', 'bubbles', 'cylon']; const chosenType = type || loadingTypes[Math.floor(Math.random() * loadingTypes.length)]; return ( <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', backgroundColor: '#282c34' }}> <ReactLoading type={chosenType} color={color || '#fff'} height={size} width={size} delay={0} /> </div> ); }; export default LoadingSpinner; // To use this component: // <LoadingSpinner type="spin" color="#61dafb" size="100px" /> // <LoadingSpinner type="balls" color="#a0a0a0" />

Debug

Known footguns

breakingThe default value for the `delay` prop changed from an undefined behavior to `0` milliseconds. If you relied on a previous implicit delay, you may need to explicitly set it now.

gotchaThe `height` and `width` props, previously primarily numeric (interpreted as pixels), now explicitly support string values (e.g., '20%', '100vw'). Ensure your values are correctly typed.

gotchaThis package relies on `react` and `prop-types` as peer dependencies. Missing these can lead to runtime errors or warnings in the console.

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

0 hits · last 30 days

No traffic data recorded yet.

Resources

githubhttps://github.com/fakiolinho/react-loading ↗

packagehttps://www.npmjs.com/package/react-loading ↗