🎨  primereact-timeline-progress

TimelineProgress is a custom PrimeReact component which uses the built-in Timeline to indicate progress of a process.
Please see Usage for details.

Live Demo

You can evaluate this package in a ⚡ StackBlitz example available here.

Prerequisites

Use NPM or an equivalent to add this package to your project:

npm i primereact-timeline-progress

Usage

Using TimelineProgress in your JSX code is same as working with the built-in components, for example:

import { TimelineProgress } from 'primereact-timeline-progress';

function App() {
    return <TimelineProgress
        stages={ [ 'Upload your file', 'Confirm your choices', 'Processing', 'Download' ] }
        stage={ 0 }
    />;
}

Properties

|name|is required?|type|default value|description| |---|---|---|---|---| |stages|Yes|array<string> | array<object>|undefined|A list of all stages in your process. Provide an array of strings or objects with a label property (and opposite, optionally).| |stage|No|number|0|Current stage of the process (0-indexed).| |layout|No|string|vertical|Inherited from Timeline. Use either vertical or horizontal.| |align|No|string|left | top|Inherited from Timeline. Available values: alternate, left, right, top, bottom. Default value depends on layout.| |emphasize_current_label|No|boolean|true|Whether to use bold text for the current stage label.| |diminish_opposite|No|boolean|true|Whether to use smaller font size for opposite values.|

Important notes

• The component's styling depends on selected theme.
• All properties are strictly checked. If you provide an invalid value, TimelineProgress will try to stop you (see console for errors).
• TimelineProgress fixes the Timeline's issue with alternate alignment rendering in horizontal layouts (As seen here). There's no need to provide a placeholder opposite value to avoid rendering defects.
• TimelineProgress removes the opposite side of the Timeline if it's unused. Originally, Timeline leaves a blank div which takes space without any apparent purpose (leading to issues with alignment, for instance).

License

LICENSE.md

Disclaimer

This package is not connected to, affiliated with or endorsed by PrimeTek in any way.

Contact

Please feel free to reach out if you'd like to provide feedback, contribute, or discuss your specific application:

📬 [email protected]