{"id":11634,"library":"rc-progress","title":"React Progress UI Component","description":"rc-progress is a lightweight, performant React UI component library providing fundamental progress indicators, specifically Line and Circle progress bars. It is currently stable at version 4.0.0, released in late 2023, with maintenance releases occurring periodically as needed. The library focuses on delivering unstyled, highly customizable SVG-based progress components, allowing developers full control over styling and animation via props like `strokeWidth`, `strokeColor`, and `percent`. It differentiates itself by offering a lean API for common progress scenarios without the overhead of a full UI component suite. The library ships with TypeScript type definitions, ensuring a robust development experience, and maintains compatibility with modern React versions (>=16.9.0) while also supporting older browsers like IE9+.","status":"active","version":"4.0.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/progress","tags":["javascript","react","react-component","react-progress","progress","typescript"],"install":[{"cmd":"npm install rc-progress","lang":"bash","label":"npm"},{"cmd":"yarn add rc-progress","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-progress","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React component functionality.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"Use named import with ES Modules in modern React applications. CommonJS `require` is generally not recommended.","wrong":"const { Line } = require('rc-progress');","symbol":"Line","correct":"import { Line } from 'rc-progress';"},{"note":"Circle is a named export, not a default export.","wrong":"import Circle from 'rc-progress';","symbol":"Circle","correct":"import { Circle } from 'rc-progress';"},{"note":"Importing types for use in TypeScript projects to ensure correct prop validation and autocomplete.","symbol":"ProgressLineProps","correct":"import type { ProgressLineProps } from 'rc-progress';"}],"quickstart":{"code":"import React, { useState, useEffect } from 'react';\nimport { Line, Circle } from 'rc-progress';\n\nconst ProgressDemo: React.FC = () => {\n  const [percent, setPercent] = useState<number>(0);\n\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setPercent((prevPercent) => {\n        if (prevPercent >= 100) {\n          return 0; // Reset progress\n        }\n        return prevPercent + 10;\n      });\n    }, 500);\n\n    return () => clearInterval(timer);\n  }, []);\n\n  return (\n    <div style={{ padding: '20px', maxWidth: '400px', margin: 'auto', textAlign: 'center' }}>\n      <h2>Line Progress</h2>\n      <Line\n        percent={percent}\n        strokeWidth={4}\n        strokeColor={percent > 50 ? '#87d068' : '#108ee9'}\n        trailWidth={4}\n        style={{ marginBottom: '40px' }}\n      />\n\n      <h2>Circle Progress</h2>\n      <Circle\n        percent={percent}\n        strokeWidth={6}\n        strokeColor={percent > 50 ? '#87d068' : '#108ee9'}\n        trailWidth={6}\n        strokeLinecap=\"round\"\n        style={{ width: '150px', height: '150px' }}\n      />\n\n      <p style={{ marginTop: '30px', fontSize: '1.2em', fontWeight: 'bold' }}>\n        Current Progress: {percent}%\n      </p>\n    </div>\n  );\n};\n\nexport default ProgressDemo;","lang":"typescript","description":"This quickstart demonstrates how to use both `Line` and `Circle` components with a dynamically updating percentage, illustrating basic usage and styling."},"warnings":[{"fix":"Update any usage of the `space` prop to `gap` (e.g., `space={10}` becomes `gap={10}`).","message":"The `space` prop has been renamed to `gap` for `Line` and `Circle` components.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Upgrade your project's React and ReactDOM versions to at least 16.9.0. Run `npm install react@^16.9.0 react-dom@^16.9.0` or `yarn add react@^16.9.0 react-dom@^16.9.0`.","message":"Ensure `react` and `react-dom` peer dependencies are met. The library requires `>=16.9.0`.","severity":"gotcha","affected_versions":"<4.0.0"},{"fix":"Test in target browsers and include necessary polyfills if issues arise in older environments.","message":"While `rc-progress` supports older browsers like IE9+, ensure your overall project's browserlist and polyfills are configured correctly if targeting such environments, as the component itself relies on SVG rendering capabilities.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install the package using `npm install rc-progress` or `yarn add rc-progress`. Verify the import path is correct.","cause":"The `rc-progress` package is not installed or incorrectly referenced.","error":"Module not found: Can't resolve 'rc-progress' in 'src/App.js'"},{"fix":"Ensure you are using `import { Line, Circle } from 'rc-progress';` for ES Modules. If using CommonJS, explicitly destructure: `const { Line, Circle } = require('rc-progress');` (though ESM is preferred).","cause":"Attempting to use `require()` for ES Module imports or incorrect named import syntax in an ES Module context.","error":"TypeError: (0 , rc_progress__WEBPACK_IMPORTED_MODULE_0__.Line) is not a function"},{"fix":"Replace the `space` prop with `gap`. For example, change `<Line space={10} ... />` to `<Line gap={10} ... />`.","cause":"Attempting to use the deprecated `space` prop in `rc-progress` v4.0.0 or later.","error":"Property 'space' does not exist on type 'IntrinsicAttributes & ProgressLineProps & RefAttributes<any>'."}],"ecosystem":"npm"}