{"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.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install react-loading"],"cli":null},"imports":["import ReactLoading from 'react-loading';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}