React Progress UI Component

Common errors

• Module not found: Can't resolve 'rc-progress' in 'src/App.js'

  cause The `rc-progress` package is not installed or incorrectly referenced.
  fix Install the package using `npm install rc-progress` or `yarn add rc-progress`. Verify the import path is correct.

• TypeError: (0 , rc_progress__WEBPACK_IMPORTED_MODULE_0__.Line) is not a function

  cause Attempting to use `require()` for ES Module imports or incorrect named import syntax in an ES Module context.
  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).

• Property 'space' does not exist on type 'IntrinsicAttributes & ProgressLineProps & RefAttributes<any>'.

  cause Attempting to use the deprecated `space` prop in `rc-progress` v4.0.0 or later.
  fix Replace the `space` prop with `gap`. For example, change `<Line space={10} ... />` to `<Line gap={10} ... />`.

Warnings

• breaking The `space` prop has been renamed to `gap` for `Line` and `Circle` components.
  Fix: Update any usage of the `space` prop to `gap` (e.g., `space={10}` becomes `gap={10}`).
• gotcha Ensure `react` and `react-dom` peer dependencies are met. The library requires `>=16.9.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`.
• gotcha 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.
  Fix: Test in target browsers and include necessary polyfills if issues arise in older environments.

Install

• npm install rc-progress npm
• yarn add rc-progress yarn
• pnpm add rc-progress pnpm

Imports

• Line
  wrong:

  const { Line } = require('rc-progress');

  correct:

  import { Line } from 'rc-progress';

  Use named import with ES Modules in modern React applications. CommonJS `require` is generally not recommended.
• Circle
  wrong:

  import Circle from 'rc-progress';

  correct:

  import { Circle } from 'rc-progress';

  Circle is a named export, not a default export.
• ProgressLineProps

  import type { ProgressLineProps } from 'rc-progress';

  Importing types for use in TypeScript projects to ensure correct prop validation and autocomplete.

Quickstart

This quickstart demonstrates how to use both `Line` and `Circle` components with a dynamically updating percentage, illustrating basic usage and styling.

import React, { useState, useEffect } from 'react';
import { Line, Circle } from 'rc-progress';

const ProgressDemo: React.FC = () => {
  const [percent, setPercent] = useState<number>(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setPercent((prevPercent) => {
        if (prevPercent >= 100) {
          return 0; // Reset progress
        }
        return prevPercent + 10;
      });
    }, 500);

    return () => clearInterval(timer);
  }, []);

  return (
    <div style={{ padding: '20px', maxWidth: '400px', margin: 'auto', textAlign: 'center' }}>
      <h2>Line Progress</h2>
      <Line
        percent={percent}
        strokeWidth={4}
        strokeColor={percent > 50 ? '#87d068' : '#108ee9'}
        trailWidth={4}
        style={{ marginBottom: '40px' }}
      />

      <h2>Circle Progress</h2>
      <Circle
        percent={percent}
        strokeWidth={6}
        strokeColor={percent > 50 ? '#87d068' : '#108ee9'}
        trailWidth={6}
        strokeLinecap="round"
        style={{ width: '150px', height: '150px' }}
      />

      <p style={{ marginTop: '30px', fontSize: '1.2em', fontWeight: 'bold' }}>
        Current Progress: {percent}%
      </p>
    </div>
  );
};

export default ProgressDemo;