progress-bar.md

Progress bar

ProgressBar is an extended version of Spinner, where it's possible to calculate a progress percentage.

Theme | Example code

Usage

import React, {useEffect, useState} from 'react';
import {render, Box} from 'ink';
import {ProgressBar} from '@inkjs/ui';

function Example() {
	const [progress, setProgress] = useState(0);

	useEffect(() => {
		if (progress === 100) {
			return;
		}

		const timer = setTimeout(() => {
			setProgress(progress + 1);
		}, 50);

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

	return (
		<Box width={30}>
			<ProgressBar value={progress} />
		</Box>
	);
}

render(<Example />);

Props

value

Type: number
Minimum: 0
Maximum: 100
Default: 0

Progress.