react-progress-bar-timer

react-progress-bar-timer

Customizable React progress bar with a labeled timer

Demo • Examples • Tech Stack • Features • Installation • Usage • Styling

Demo

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.

Examples

• 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

Tech Stack

• React
• Material-UI
• react-scripts
• Node.js
• Chromatic
• Vercel

Features

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

Installation

yarn

yarn add react-progress-bar-timer

npm

npm install react-progress-bar-timer

Usage

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.

Styling

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

CSS Classes

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.

Development

Installing Dependencies

yarn

yarn install

npm

npm install

Storybook

Storybook can be used to demo your code changes in real time with HMR.

Starting Storybook

yarn

yarn storybook

npm

npm storybook

Example App

In addition to Storybook, you can use the example app in example/ to test changes.

Watch for changes to src/

yarn

yarn start

npm

npm start

Serve Example App

yarn

cd example/
yarn install
yarn start

npm

cd example/
npm install
npm start

The example app will now be served locally and use HMR to live update on changes to the source code or example app.

Changelog

[0.3.4] - 2022-06-11

Changed

• styles merged via useStyles instead of cx
• default colors
• repo name aligned with package name