{"id":17339,"library":"react-loading","title":"React Loading Components","description":"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.","status":"active","version":"2.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/fakiolinho/react-loading","tags":["javascript","loading","react","react-component"],"install":[{"cmd":"npm install react-loading","lang":"bash","label":"npm"},{"cmd":"yarn add react-loading","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-loading","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false},{"reason":"Peer dependency for type checking React component props.","package":"prop-types","optional":false}],"imports":[{"note":"Primarily designed for ESM usage in modern React projects. While CommonJS `require` might work in some build setups, it's not the idiomatic way.","wrong":"const ReactLoading = require('react-loading');","symbol":"ReactLoading","correct":"import ReactLoading from 'react-loading';"}],"quickstart":{"code":"import React from 'react';\nimport ReactLoading from 'react-loading';\n\nconst LoadingSpinner = ({ type, color, size = '64px' }) => {\n  // Example usage for different loading types and dynamic sizing\n  const loadingTypes = ['balls', 'spin', 'bubbles', 'cylon'];\n  const chosenType = type || loadingTypes[Math.floor(Math.random() * loadingTypes.length)];\n\n  return (\n    <div style={{\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      height: '100vh',\n      backgroundColor: '#282c34'\n    }}>\n      <ReactLoading \n        type={chosenType} \n        color={color || '#fff'} \n        height={size} \n        width={size} \n        delay={0} \n      />\n    </div>\n  );\n};\n\nexport default LoadingSpinner;\n\n// To use this component:\n// <LoadingSpinner type=\"spin\" color=\"#61dafb\" size=\"100px\" />\n// <LoadingSpinner type=\"balls\" color=\"#a0a0a0\" />","lang":"javascript","description":"Demonstrates importing and rendering a `ReactLoading` component with dynamic type and color props, including styling for display."},"warnings":[{"fix":"Review components using `ReactLoading` and explicitly set `delay={desiredMilliseconds}` if you need a non-zero delay. The default is now no delay.","message":"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.","severity":"breaking","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.3"},{"fix":"Ensure `react` and `prop-types` are installed in your project: `npm install react prop-types` or `yarn add react prop-types`.","message":"This package relies on `react` and `prop-types` as peer dependencies. Missing these can lead to runtime errors or warnings in the console.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Pass a valid string value for the `type` prop, chosen from the available loading types (e.g., 'balls', 'spin', 'bubbles').","cause":"The `type` prop was not provided or was `undefined` when rendering the `ReactLoading` component.","error":"Warning: Failed prop type: The prop `type` is marked as required in `ReactLoading`, but its value is `undefined`."},{"fix":"Install `prop-types`: `npm install prop-types` or `yarn add prop-types`.","cause":"The `prop-types` package, which is a peer dependency of `react-loading`, is not installed in the project's `node_modules`.","error":"Error: `prop-types` is a peer dependency of `react-loading`. Please ensure `prop-types` is installed in your project."},{"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.","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.","error":"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."}],"ecosystem":"npm","meta_description":null}