React Loading Components

2.0.3 · active · verified Wed Apr 22

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.

Common errors

```
Warning: Failed prop type: The prop `type` is marked as required in `ReactLoading`, but its value is `undefined`.
```
cause 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.
```
cause 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.
```
cause 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.

Warnings

breaking The 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.
gotcha The `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.
gotcha This 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`.

Install

npm install react-loading npm
yarn add react-loading yarn
pnpm add react-loading pnpm

Imports

ReactLoading
wrong:
```
const ReactLoading = require('react-loading');
```
correct:
```
import ReactLoading from '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.

Quickstart

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" />

view raw JSON →