Primereact-timeline-progress NPM

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

npm.io

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