react-progress-bar-timer

react-progress-timer

A reusable React progress bar timer component.

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.
  • source code
  • This can be served during development
• 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

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.
• Flashing animation upon finishing.
• Progress bar can fill or empty to represent progress.
• Progress bar can move left or right.
• Configure duration in seconds.
• 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={60} />
);

ProgressTimer Usage Docs

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

Name	Type	Description
direction	"left" | "right"	Direction the bar grows toward.
variant	"fill" | "empty"	Determines if the bar fills or empties.
color	string	Color of the bar; background is same with lower opacity.
fontColor	string	Color of the label and timer.
duration	number	Duration of the timer in seconds.
label	string	Label that describes the timer.
buttonText	string	Text displayed when timer is inactive (overrides label).
fontSize	string | number	Font size of the label and timer. Use to scale progress bar size.
showDuration	boolean	Whether the timer's duration should be shown when inactive.
rootRounded	boolean	Whether the progress bar's root element should be rounded.
barRounded	boolean	Whether the progress bar should be rounded.
started	boolean | null	Whether the timer should be started. (true = start, false = stop, null/undefined = await input).
classes	object	Styles applied to the component (override or append to existing styles).

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.2] - 2022-06-11

Added

• readme
• git tag & npm publish github workflow