{"_id":"@asyrafhussin/react-progress-bar","_rev":"1-59d6b5d553d50267bf10ea1caf861f60","name":"@asyrafhussin/react-progress-bar","dist-tags":{"latest":"5.0.6"},"versions":{"5.0.4":{"name":"@asyrafhussin/react-progress-bar","version":"5.0.4","description":"> Progress Bar React Component","main":"dist/index.js","directories":{"example":"example"},"scripts":{"build":"rm -rf dist && rollup -c","start":"rollup -c -w","prepublish:public":"npm run build","publish:public":"npm publish --access public"},"repository":{"type":"git","url":"git+https://github.com/AsyrafHussin/react-progress-bar.git"},"keywords":["react","react-component","progress bar","progress-bar"],"author":{"name":"Asyraf Hussin"},"license":"MIT","bugs":{"url":"https://github.com/AsyrafHussin/react-progress-bar/issues"},"peerDependencies":{"react":"^16.0.0 || ^17 || ^18","react-dom":"^16.0.0 || ^17 || ^18"},"devDependencies":{"@types/react":"^18.0.12","@types/react-dom":"^18.0.5","babel-core":"^6.26.3","babel-runtime":"^6.26.0","react":"^18.1.0","react-dom":"^18.1.0","rollup":"^2.75.5","rollup-plugin-typescript2":"^0.29.0","typescript":"^4.7.3"},"gitHead":"3534fa4e15fcbff8b9472e874b8eb21a1c80ef1b","homepage":"https://github.com/AsyrafHussin/react-progress-bar#readme","_id":"@asyrafhussin/react-progress-bar@5.0.4","_nodeVersion":"18.18.0","_npmVersion":"9.4.2","dist":{"integrity":"sha512-4gQFOzC/E0yNWeGV3Sq7l/B9ZURRLau2/T3q5+uL3ll/MB7izKJRcp43w43CqKUjPAJN1+36v6h7YJrY2rpi3Q==","shasum":"d3dbace8b0184951bb9aa35c57d687f1e7cc7c4c","tarball":"https://registry.npmjs.org/@asyrafhussin/react-progress-bar/-/react-progress-bar-5.0.4.tgz","fileCount":3,"unpackedSize":10951,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZNgiHJVJz3HcoFw/NF917hSlj9koY40gIBLKLs/cQ8AiEAj1mF1k5VQXU9F5z+Wle18LdF6238tApaAC1SoxDlXw4="}]},"_npmUser":{"name":"asyrafhussin","email":"asyrafhussin4@gmail.com"},"maintainers":[{"name":"asyrafhussin","email":"asyrafhussin4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-progress-bar_5.0.4_1696551593221_0.3855908378407944"},"_hasShrinkwrap":false},"5.0.6":{"name":"@asyrafhussin/react-progress-bar","version":"5.0.6","description":"> Progress Bar React Component","main":"dist/index.js","types":"dist/index.d.ts","directories":{"example":"example"},"scripts":{"build":"rm -rf dist && rollup -c","start":"rollup -c -w","prepublish:public":"npm run build","publish:public":"npm publish --access public"},"repository":{"type":"git","url":"git+https://github.com/AsyrafHussin/react-progress-bar.git"},"keywords":["react","react-component","progress bar","progress-bar"],"author":{"name":"Asyraf Hussin"},"license":"MIT","bugs":{"url":"https://github.com/AsyrafHussin/react-progress-bar/issues"},"peerDependencies":{"react":"^16.0.0 || ^17 || ^18","react-dom":"^16.0.0 || ^17 || ^18"},"devDependencies":{"@types/react":"^18.0.12","@types/react-dom":"^18.0.5","babel-core":"^6.26.3","babel-runtime":"^6.26.0","react":"^18.1.0","react-dom":"^18.1.0","rollup":"^2.75.5","rollup-plugin-typescript2":"^0.29.0","typescript":"^4.7.3"},"gitHead":"b98f4e44dd2710e4c119d19aa476c74ba9d63d3e","homepage":"https://github.com/AsyrafHussin/react-progress-bar#readme","_id":"@asyrafhussin/react-progress-bar@5.0.6","_nodeVersion":"18.18.0","_npmVersion":"9.4.2","dist":{"integrity":"sha512-XdyDZ2En6Vny3ftYySPbhtzSlOW2qN9bHy9bT6/n5XYQzoTNSMsqIRL4vYQ/Ylx5Nrc3WqrKVOVoeqDaEJd2ow==","shasum":"de9b4b75660bfa597d075296754e87aeba6accc1","tarball":"https://registry.npmjs.org/@asyrafhussin/react-progress-bar/-/react-progress-bar-5.0.6.tgz","fileCount":6,"unpackedSize":32691,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeaH4ThM/6mkM+YSRbyRsh8tS+sbj06hvRQLUAQ8I1WQIhALalg6edSsAedXWV7JINTVOFsmiV/iOt3owq2NQbZp4u"}]},"_npmUser":{"name":"asyrafhussin","email":"asyrafhussin4@gmail.com"},"maintainers":[{"name":"asyrafhussin","email":"asyrafhussin4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-progress-bar_5.0.6_1696552303735_0.2609527279200714"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-06T00:19:53.077Z","5.0.4":"2023-10-06T00:19:53.411Z","modified":"2023-10-06T00:31:44.133Z","5.0.6":"2023-10-06T00:31:43.963Z"},"maintainers":[{"name":"asyrafhussin","email":"asyrafhussin4@gmail.com"}],"description":"> Progress Bar React Component","homepage":"https://github.com/AsyrafHussin/react-progress-bar#readme","keywords":["react","react-component","progress bar","progress-bar"],"repository":{"type":"git","url":"git+https://github.com/AsyrafHussin/react-progress-bar.git"},"author":{"name":"Asyraf Hussin"},"bugs":{"url":"https://github.com/AsyrafHussin/react-progress-bar/issues"},"license":"MIT","readme":"# @asyrafhussin/react-progress-bar\n\n> Progress Bar React Component\n\n[![NPM](https://img.shields.io/npm/v/@asyrafhussin/react-progress-bar.svg)](https://www.npmjs.com/package/@asyrafhussin/react-progress-bar) ![npm bundle size](https://img.shields.io/bundlephobia/min/@asyrafhussin/react-progress-bar)![GitHub](https://img.shields.io/github/license/katerinalupacheva/react-progress-bar)![npm](https://img.shields.io/npm/dw/@asyrafhussin/react-progress-bar)\n\n---\n\n![demo](https://i.ibb.co/Fgh0BsD/animated-demo.gif)\n\n---\n\n[Playground / Code Generator](https://katerinalupacheva.github.io/react-progress-bar/)\n\n---\n\n## Install\n\n```bash\nnpm install --save @asyrafhussin/react-progress-bar\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\n\nimport ProgressBar from \"@asyrafhussin/react-progress-bar\";\n\nconst Example = () => {\n return ;\n};\n```\n\n## Examples\n\n### Label without \"%\" at the end\n\n![example1](./images/example1.png)\n\n```jsx\n\n\n```\n\n### Max completed value is greater than 100\n\n![example1](./images/example2.png)\n\n```jsx\n\n```\n\n### Custom Label\n\n![example1](./images/example3.png)\n\n```jsx\n\n```\n\n### Custom class names\n\n![example1](./images/example4.png)\n\n```css\n//styles.scss\n\n.wrapper {\n border: 3px solid blue;\n}\n\n.container {\n background-color: pink;\n}\n\n.barCompleted {\n background-color: lightblue;\n width: 80%;\n}\n\n.label {\n font-size: 20px;\n color: green;\n}\n```\n\n```jsx\nimport './styles.scss'\n\n...\n\n\n```\n\n## Props\n\n| Name | Type | Default | Description |\n| -------------------------- | -------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------- |\n| `completed` (required) | `Number or string` | | Percentage of completed progress bar value.
If a string, the \"%\" won't be added to the label. See [Examples](#examples) |\n| `maxCompleted` | `number` | `100` | Max possible value of the `completed` prop |\n| `customLabel` | `string` | undefined | Custom label |\n| `bgColor` | `string` | `#6a1b9a` | Color of the completed bar |\n| `height` | `string` | `20px` | Height of the bar |\n| `width` | `string` | `100%` | Width of the bar |\n| `margin` | `string` | | Margin |\n| `padding` | `string` | | Padding |\n| `borderRadius` | `string` | `50px` | Border radius of the bar |\n| `baseBgColor` | `string` | `#e0e0de` | Color of the \"non-completed\" bar |\n| `labelAlignment` | `string:`
`left, center, right, outside` | `right` | Position of the label inside the completed bar or outside bar |\n| `labelColor` | `string` | `#fff` | Color of the label text |\n| `labelSize` | `string` | `15px` | Font-size of the label text |\n| `isLabelVisible` | `boolean` | `true` | Visibility of the label |\n| `transitionDuration` | `string` | `1s` | Duration of the width transition |\n| `transitionTimingFunction` | `string:`
`ease, linear, ease-in, ease-out, ease-in-out` | `ease-in-out` | Timing function of the width transition |\n| `animateOnRender` | `boolean` | false | Should the bar width be animated on the first render |\n| `initCompletedOnAnimation` | `string or number` | 0 | Initial completed value (e.g. the width of the completed bar) on animation start (applies only when `animateOnRender` is true) |\n| `className` | `string` | | Add a `className` to the parent `div` (see [example](#custom-class-names)) |\n| `barContainerClassName` | `string` | | Add a `className` to the container `div` (see [example](#custom-class-names)) |\n| `completedClassName` | `string` | | Add a `className` to the completed part of the bar (see [example](#custom-class-names)) |\n| `labelClassName` | `string` | | Add a `className` to the bar label (see [example](#custom-class-names)) |\n| `dir` | `string:`
`ltr, rtl, auto` | `ltr` | Progressbar HTML direction |\n| `ariaValuemin` | `number` | `0` | accessibility: Defines the minimum allowed value for a range |\n| `ariaValuemax` | `number` | `100` | accessibility: Defines the maximum allowed value for a range |\n| `ariaValuetext` | `number` | `null` | accessibility: Defines the human readable text alternative of aria-valuenow (defaults to completed if not passed) |\n| `customLabelStyles` | CSS.Properties | | custom CSS properties for a label |\n\n## License\n\nMIT © [asyrafhussin](https://github.com/asyrafhussin)\n","readmeFilename":"README.md"}