rc-progress

library4.0.0jsnpmunverified

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+.

web-framework

npm install rc-progress

github ↗package ↗

INSTALL

IMPORT

SIG · RC-PROGRESS

rc-progress

web-frameworkjavascriptv4.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Line

✓ import { Line } from 'rc-progress';

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

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

Circle

✓ import { Circle } from 'rc-progress';

✗ 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.

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;

Debug

Known issues

breakingThe `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}`).

affects: >=4.0.0

gotchaEnsure `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`.

affects: <4.0.0

gotchaWhile `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.

affects: all

Errors

Common errors & fixes

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

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

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>'.

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} ... />`.

Upgrade

Version history

4.0.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React component functionality.

react-domrequiredPeer dependency for rendering React components.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/react-component/progress ↗

packagehttps://www.npmjs.com/package/rc-progress ↗