{"library":"react-spinners","title":"React Spinners","description":"React Spinners is a comprehensive collection of declarative, customizable loading spinner components designed for React applications. Currently stable at version 0.17.0, it offers a diverse range of animated loaders to provide visual feedback during asynchronous operations. The library maintains an active development and release cadence, consistently delivering updates, bug fixes, and performance improvements. A significant distinguishing feature, introduced in version 0.13.0, is its complete elimination of external runtime dependencies, drastically reducing bundle size and improving overall project footprint. It provides robust TypeScript support, integrates seamlessly with modern React ecosystems, supports React versions from 16 through 19, and is optimized for tree-shaking.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-spinners"],"cli":null},"imports":["import { ClipLoader } from 'react-spinners';","import { ScaleLoader } from 'react-spinners';","import { DotLoader } from 'react-spinners';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { useState, CSSProperties } from \"react\";\nimport { ClipLoader } from \"react-spinners\";\n\nconst override: CSSProperties = {\n  display: \"block\",\n  margin: \"0 auto\",\n  borderColor: \"red\"\n};\n\nfunction App() {\n  let [loading, setLoading] = useState(true);\n  let [color, setColor] = useState(\"#ffffff\");\n\n  return (\n    <div className=\"sweet-loading\">\n      <button onClick={() => setLoading(!loading)}>Toggle Loader</button>\n      <input\n        value={color}\n        onChange={(e) => setColor(e.target.value)}\n        placeholder=\"Color of the loader\"\n      />\n\n      <ClipLoader\n        color={color}\n        loading={loading}\n        cssOverride={override}\n        size={150}\n        aria-label=\"Loading Spinner\"\n        data-testid=\"loader\"\n      />\n    </div>\n  );\n}\n\nexport default App;\n","lang":"typescript","description":"Demonstrates how to import and use the ClipLoader component with state management for loading and color props, including CSS overrides.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}