{"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,"search_vec":"'2.0.3':49 'adapt':25 'address':60 'aesthet':79 'anim':17,24,84 'applic':20 'ball':39 'bar':40 'base':83,89 'brent':27 'bubbl':41 'bug':61 'cadenc':57 'choic':100 'collect':9 'color':92 'complex':113 'compon':3,120 'conveni':99 'current':45 'custom':90 'customiz':15 'delay':95 'differenti':73 'divers':76 'easi':12 'easy-to-us':11 'enhanc':65 'extern':110 'featur':70 'fix':62 'frequent':68 'includ':74 'integr':102 'jackson':28 'javascript':115 'leverag':22 'load':2,6,16,30,104,116 'make':96 'minor':64 'new':69 'offer':32 'packag':51 'pleas':80 'primari':72 'project':31 'prop':88 'prop-bas':87 'provid':7 'rang':77 'rather':66 'react':1,5,19,107,117,119 'react-compon':118 'react-load':4 'releas':56 'setup':114 'size':93 'somewhat':54 'spin':43 'sporad':55 'stabl':46 'state':105 'straightforward':86 'stylesheet':111 'svg':23,82 'svg-base':81 'type':36 'ui':108 'updat':59 'use':14 'varieti':34 'version':47 'visual':103 'without':109","created_at":"2026-04-22T16:30:53.986443+00:00","updated_at":"2026-04-22T16:30:53.986443+00:00","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,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/fakiolinho/react-loading","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-loading","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-21","install_tag":null}}