{"id":11865,"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.","status":"active","version":"0.17.0","language":"javascript","source_language":"en","source_url":"https://github.com/davidhu2000/react-spinners","tags":["javascript","react-spinners","react-spinner","react","reactjs","loader","loaders","loading","spinner","typescript"],"install":[{"cmd":"npm install react-spinners","lang":"bash","label":"npm"},{"cmd":"yarn add react-spinners","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-spinners","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components into the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The library primarily uses ES Module exports. CommonJS require() is generally discouraged for modern React projects and might lead to issues with tree-shaking or module resolution.","wrong":"const ClipLoader = require('react-spinners');","symbol":"ClipLoader","correct":"import { ClipLoader } from 'react-spinners';"},{"note":"All loader components are named exports, not default exports. Attempting to use a default import will result in 'undefined' or a module error.","wrong":"import ScaleLoader from 'react-spinners';","symbol":"ScaleLoader","correct":"import { ScaleLoader } from 'react-spinners';"},{"note":"All individual loaders are directly available as named exports from the top-level 'react-spinners' package. Avoid importing from deep paths like 'dist/' unless specifically advised for legacy reasons.","wrong":"import { DotLoader, RingLoader } from 'react-spinners/dist/DotLoader';","symbol":"DotLoader","correct":"import { DotLoader } from 'react-spinners';"}],"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."},"warnings":[{"fix":"Upgrade to `react-spinners@0.16.1` or higher, which reverts `barCount` to an optional prop. Alternatively, explicitly provide the `barCount` prop when using `ScaleLoader` in version `0.16.0`.","message":"Version 0.16.0 introduced a breaking change where the `barCount` prop for `ScaleLoader` became mandatory. This was an unintended change.","severity":"breaking","affected_versions":"0.16.0"},{"fix":"Upgrade to `react-spinners@0.17.0` or higher, which includes `\"use client\"` directives to ensure compatibility with RSC. For older versions, wrap spinner components in a client component or ensure their parent is marked as client-side.","message":"Prior to version 0.17.0, `react-spinners` components might not have functioned correctly or required manual client component directives when used directly within React Server Components (RSC) contexts.","severity":"gotcha","affected_versions":"<0.17.0"},{"fix":"Verify your build setup handles ES Module imports correctly. For legacy CommonJS environments, ensure your bundler (e.g., Webpack, Rollup) is configured to transpile or resolve ES Modules from `node_modules`.","message":"Version 0.17.0 removed UMD and duplicated CommonJS files from the published package to reduce its total size. While beneficial for most, users with highly specific or legacy CommonJS build configurations might encounter changes in module resolution or bundling behavior.","severity":"gotcha","affected_versions":">=0.17.0"},{"fix":"To avoid the `HashLoader` color consistency bug, use `react-spinners@0.13.x` or upgrade to `react-spinners@0.15.0` or higher.","message":"A bug in `react-spinners` versions 0.14.0 and 0.14.1 caused multiple `HashLoader` instances with different `color` props to render with the same color, due to a fix being introduced and then immediately reverted.","severity":"gotcha","affected_versions":"0.14.0, 0.14.1"},{"fix":"No direct fix needed, but be aware of the internal architectural change. If you previously had custom Emotion configurations interacting with `react-spinners`, those integrations might need review or removal as the library no longer uses Emotion.","message":"Version 0.13.0 underwent a major refactor, removing `@emotion/react` as a dependency and rewriting all components as functional components. This change drastically reduced the library's bundle size and removed an external styling engine dependency.","severity":"gotcha","affected_versions":">=0.13.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade to `react-spinners@0.16.1` or higher, or explicitly pass a `barCount` prop (e.g., `<ScaleLoader barCount={5} />`) if locked to `v0.16.0`.","cause":"Attempting to use `ScaleLoader` from `react-spinners@0.16.0` without providing the required `barCount` prop.","error":"TypeError: Cannot read properties of undefined (reading 'barCount')"},{"fix":"Use ES Module named imports: `import { ClipLoader } from 'react-spinners';` instead of `const ClipLoader = require('react-spinners');`.","cause":"Attempting to import `react-spinners` components using CommonJS `require()` syntax in an ES Module-only environment (e.g., a modern React app or a Next.js App Router component).","error":"ReferenceError: require is not defined"},{"fix":"Upgrade to `react-spinners@0.17.0` or higher, which includes necessary `\"use client\"` directives. For older versions, explicitly make the component a client component by adding `'use client';` at the top of its file, or render the spinner within a client-side wrapper component.","cause":"Using `react-spinners` components directly in a React Server Component (RSC) without them being marked as client components, leading to a mismatch between server-rendered and client-hydrated content.","error":"Error: Hydration failed because the initial UI does not match what was rendered on the server."},{"fix":"Downgrade to `react-spinners@0.13.x` or upgrade to `react-spinners@0.15.0` or newer to resolve this `HashLoader` specific coloring issue.","cause":"This is a known bug specifically present in `react-spinners@0.14.0` and `react-spinners@0.14.1` related to `HashLoader`'s color management.","error":"All HashLoader components render with the same color, despite being passed different 'color' props."}],"ecosystem":"npm"}