{"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+.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-progress"],"cli":null},"imports":["import { Line } from 'rc-progress';","import { Circle } from 'rc-progress';","import type { ProgressLineProps } from 'rc-progress';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}