Skip to content

wasaab/react-progress-bar-timer

Repository files navigation

react-progress-bar-timer

NPM Version GitHub ECMAScript Version

Customizable React progress bar with a labeled timer

DemoExamplesTech StackFeaturesInstallationUsageStyling

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

Tech Stack

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.