react-progress-bar-timer
Advanced tools
react-progress-bar-timer - npm Package Compare versions
Comparing version
| { | ||
| "version": "0.3.2", | ||
| "version": "0.3.3", | ||
| "name": "react-progress-bar-timer", | ||
| "description": "Customizable React progress bar with a labeled timer", | ||
| "author": "wasaab", | ||
| "license": "MIT", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git@github.com:wasaab/react-progress-timer.git" | ||
| }, | ||
| "bugs": "https://github.com/wasaab/react-progress-timer/issues", | ||
| "keywords": [ | ||
| "react", | ||
| "progress", | ||
| "progress-bar", | ||
| "timer", | ||
| "loading", | ||
| "material" | ||
| ], | ||
| "main": "dist/index.js", | ||
@@ -30,10 +44,10 @@ "typings": "dist/index.d.ts", | ||
| }, | ||
| "module": "dist/react-progress-timer.esm.js", | ||
| "module": "dist/react-progress-bar-timer.esm.js", | ||
| "size-limit": [ | ||
| { | ||
| "path": "dist/react-progress-timer.cjs.production.min.js", | ||
| "path": "dist/react-progress-bar-timer.cjs.production.min.js", | ||
| "limit": "350 KB" | ||
| }, | ||
| { | ||
| "path": "dist/react-progress-timer.esm.js", | ||
| "path": "dist/react-progress-bar-timer.esm.js", | ||
| "limit": "350 KB" | ||
@@ -46,3 +60,2 @@ } | ||
| "@mui/material": "^5.8.1", | ||
| "@mui/styles": "^5.8.0", | ||
| "tss-react": "^3.7.0" | ||
@@ -70,9 +83,8 @@ }, | ||
| "react-is": "^18.1.0", | ||
| "size-limit": "^7.0.8", | ||
| "tsdx": "^0.14.1", | ||
| "tslib": "^2.4.0", | ||
| "typescript": "^4.7.2" | ||
| "tsdx": "^0.14.1" | ||
| }, | ||
| "resolutions": { | ||
| "**/typescript": "^4.7.2", | ||
| "**/size-limit": "^7.0.8", | ||
| "**/tslib": "^2.4.0", | ||
| "**/typescript": "^4.7.3", | ||
| "**/@typescript-eslint/eslint-plugin": "^5.27.0", | ||
@@ -79,0 +91,0 @@ "**/@typescript-eslint/parser": "^5.27.0" |
| <div align="center"> | ||
| # react-progress-timer | ||
| # react-progress-bar-timer | ||
|  | ||
|  | ||
|  | ||
|  | ||
| A reusable React progress bar timer component. | ||
| Customizable React progress bar with a labeled timer | ||
@@ -32,6 +32,6 @@ <img src="https://i.imgur.com/C013oxd.gif" style="max-width: 378px;"></img> | ||
| + Example Parcel App | ||
| + [Example Parcel App](https://react-progress-bar-timer.vercel.app) | ||
| + Control timer via functions exposed by ref or `started` prop. | ||
| + This can be served during [development](#example-app). | ||
| + [source code](example/) | ||
| + This can be served [during development](#example-app) | ||
| + [Halo Time](https://halo-time.vercel.app/) | ||
@@ -56,6 +56,7 @@ + Halo Infinite spawn timer SPA that controls started state of timers via `started` prop or by clicking a progress bar. | ||
| + 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. | ||
| + Flashing animation upon finishing. | ||
| + Slide and Shrink/Grow text animations | ||
| + When the timer is inactive, the `label` will be replaced with `buttonText` if provided. | ||
@@ -98,3 +99,3 @@ + Always show timer even when inactive with `showDuration` set to `true` | ||
| const ExampleComponent = () => ( | ||
| <ProgressTimer label="Something" duration={60} /> | ||
| <ProgressTimer label="Something" duration={30} /> | ||
| ); | ||
@@ -109,17 +110,18 @@ ``` | ||
| | 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). | | ||
| | Name | Type | Default | Description | | ||
| |--------------|-----------------------|-------------|--------------------------------------------------------------------------------------------------------------| | ||
| | direction | `"left"` \| `"right"` | `"right"` | Direction the bar grows toward. | | ||
| | variant | `"fill"` \| `"empty"` | `"fill"` | Determines if the bar fills or empties. | | ||
| | color | `string` | `"#ffa500"` | Color of the bar; background is same with lower opacity. | | ||
| | fontColor | `string` | `"#212121"` | Color of the label and timer. | | ||
| | duration | `number` | `60` | 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` | `false` | Whether the timer's duration should be shown when inactive. | | ||
| | rootRounded | `boolean` | `true` | Whether the progress bar's root element should be rounded. | | ||
| | barRounded | `boolean` | `false` | Whether the progress bar should be rounded. | | ||
| | started | `boolean` \| `null` | | Whether the timer should be started.<br/>`true` (start) \| `false` (stop) \| `null/undefined` (await input). | | ||
| | onFinish | `func` | | Callback fired when the timer finishes. | | ||
| | classes | `object` | | Styles applied to the component (override or append to existing styles). | | ||
@@ -126,0 +128,0 @@ ## Styling |
Fixed alerts
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
86869
1.06%- Dependency count
6
-14.29%- Dev dependency count
16
-15.79%- Number of lines in readme file
226
0.89%- Number of low supply chain risk alerts
1
-50%Dependency changes
- Removed
@mui/styles@^5.8.0- Removed
@mui/styles@5.17.1(transitive)- Removed
css-vendor@2.0.8(transitive)- Removed
hyphenate-style-name@1.1.0(transitive)- Removed
is-in-browser@1.1.3(transitive)- Removed
jss@10.10.0(transitive)- Removed
jss-plugin-camel-case@10.10.0(transitive)- Removed
jss-plugin-default-unit@10.10.0(transitive)- Removed
jss-plugin-global@10.10.0(transitive)- Removed
jss-plugin-nested@10.10.0(transitive)- Removed
jss-plugin-props-sort@10.10.0(transitive)- Removed
jss-plugin-rule-value-function@10.10.0(transitive)- Removed
jss-plugin-vendor-prefixer@10.10.0(transitive)- Removed
tiny-warning@1.0.3(transitive)