React-progress-bar-timer NPM

react-progress-bar-timer

GitHub

Customizable React progress bar with a labeled timer

ProgressTimer Storybook Demo

You can change the component's props via controls and see the rendered output.
Go to the Docs tab to see example usage code snippets and documentation for props of ProgressTimer.

Example Parcel App
- Control timer via functions exposed by ref or started prop.
- This can be served during development.
- source code
Halo Time
- Halo Infinite spawn timer SPA that controls started state of timers via started prop or by clicking a progress bar.
- source code

Click to stop while running.
Click to start when unstarted.
Click to restart when finished.
Control timer with start(), stop(), and restart() via a ref.
Control timer with started prop.
Progress bar can fill or empty to represent progress.
Progress bar can move left or right.
Configure duration in seconds.
Flashing animation upon finishing.
Slide and Shrink/Grow text animations
When the timer is inactive, the label will be replaced with buttonText if provided.
Always show timer even when inactive with showDuration set to true
onFinish callback fired when timer finishes.
Customized styling with props
- color
- fontColor
- fontSize
- rootRounded
- barRounded
- classes

See Usage and Styling for more info.

yarn add react-progress-bar-timer

npm install react-progress-bar-timer

import ProgressTimer from 'react-progress-bar-timer';

const ExampleComponent = () => (
  <ProgressTimer label="Something" duration={30} />
);

ProgressTimer Usage Docs

Use the story controls to change prop values and click Show code to see a snippet

Name	Type	Default	Description
barRounded	`boolean`	`false`	Whether the progress bar should be rounded.
buttonText	`string`		Text displayed when timer is inactive (overrides label).
classes	`object`		Styles applied to the component (override or append to existing styles). ⓘ CSS Classes
color	`string`	`"#1976d2"`	Color of the bar; background is same with lower opacity.
direction	`"left"` \| `"right"`	`"right"`	Direction the bar grows toward.
duration	`number`	`60`	Duration of the timer in seconds.
fontColor	`string`	`"#ffffffd9"`	Color of the label and timer.
fontSize	`string` \| `number`		Font size of the label and timer. Progress bar scales with font size.
label	`string`		Label that describes the timer.
onFinish	`func`		Callback fired when the timer finishes.
rootRounded	`boolean`	`true`	Whether the progress bar's root element should be rounded.
showDuration	`boolean`	`false`	Whether the timer's duration should be shown when inactive.
started	`boolean` \| `null`		Whether the timer should be started.`true` (start) \| `false` (stop) \| `null/undefined` (await input).
variant	`"fill"` \| `"empty"`	`"fill"`	Determines if the bar fills or empties.

The following classes can be used with the classes prop to customize the styling.

Name	Type	Description
root	`string`	Styles applied to the root element.
progressContainer	`string`	Styles applied to the progress bar container.
textContainer	`string`	Styles applied to the text container.
progress	`string`	Styles applied to the progress bar.
label	`string`	Styles applied to the label.
time	`string`	Styles applied to the time.