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

npm install react-loading

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-LOADING

react-loading

web-frameworkjavascriptv2.0.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

ReactLoading

✓ import ReactLoading from 'react-loading';

✗ const ReactLoading = require('react-loading');

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

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 issues

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.

fix

Review components using `ReactLoading` and explicitly set `delay={desiredMilliseconds}` if you need a non-zero delay. The default is now no delay.

affects: >=2.0.0

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.

fix

When setting `height` or `width`, ensure you pass a number for pixel values or a string (e.g., `'100px'`, `'50%'`) for other CSS units. Old code using numbers for pixel values remains compatible.

affects: >=2.0.3

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

fix

Ensure `react` and `prop-types` are installed in your project: `npm install react prop-types` or `yarn add react prop-types`.

affects: >=0.1.0

Errors

Common errors & fixes

Warning: Failed prop type: The prop `type` is marked as required in `ReactLoading`, but its value is `undefined`.

The `type` prop was not provided or was `undefined` when rendering the `ReactLoading` component.

fix

Pass a valid string value for the `type` prop, chosen from the available loading types (e.g., 'balls', 'spin', 'bubbles').

Error: `prop-types` is a peer dependency of `react-loading`. Please ensure `prop-types` is installed in your project.

The `prop-types` package, which is a peer dependency of `react-loading`, is not installed in the project's `node_modules`.

fix

Install `prop-types`: `npm install prop-types` or `yarn add prop-types`.

Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

This error typically indicates that you're trying to render the `ReactLoading` component without correctly importing it as a default export, or a similar React element misuse, leading to `ReactLoading` itself being treated as a child.

fix

Ensure you are using `import ReactLoading from 'react-loading';` and rendering it as `<ReactLoading ... />` within your JSX, not as a function call or an incorrectly imported object.

Upgrade

Version history

2.0.3latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React applications.

prop-typesrequiredPeer dependency for type checking React component props.

Agent activity

4 hits · last 30 days

node

Resources

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

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