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

Usage

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

const ExampleComponent = () => (

);
`



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.

$3

| 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

$3

$3

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

#### Starting Storybook

$3

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

#### Watch for changes to src/

#### Serve Example App

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