{"_id":"@a-triki/progress-bar-react","_rev":"2-16aefcad221edbce195c1f2bb9e7dd23","name":"@a-triki/progress-bar-react","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@a-triki/progress-bar-react","version":"0.0.1","author":{"name":"Ahmed Triki"},"license":"ISC","_id":"@a-triki/progress-bar-react@0.0.1","maintainers":[{"name":"a-triki","email":"ahmed.triki.1996@gmail.com"}],"dist":{"shasum":"f27a9e15e17e210ceb17cb7f668ea6613706af60","tarball":"https://registry.npmjs.org/@a-triki/progress-bar-react/-/progress-bar-react-0.0.1.tgz","fileCount":6,"integrity":"sha512-6ZGR+wWJdnUD68qQq5rSqYye82Rzcs+rDB19BXgTFfdKQy3cOzSzQTfR/9V6+1BaVFUg0KZcIMSubBLaViXkXw==","signatures":[{"sig":"MEQCIA4ewJcwHbgAbxnMsWqkE3PWUdI8er6hSNRX9g7E71wFAiBqzKliJdZs7IA/BzWWJxsnk3TIA/OrUcLFdbJM+X7vWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7280},"main":"dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"gitHead":"d14b618c6cbec755a5ad9e0e4f146e417de093b5","scripts":{"build":"tsc","clean":"rimraf dist","version":"npm publish","prebuild":"npm run clean","preversion":"npm run build"},"_npmUser":{"name":"a-triki","email":"ahmed.triki.1996@gmail.com"},"repository":{"url":"<https://github.com/Triki-Ahmed/progress-bar-react>","type":"git"},"_npmVersion":"8.19.2","description":"Dynamic React Progress Bar using html native element","directories":{},"_nodeVersion":"20.9.0","dependencies":{"clsx":"^2.1.1","rimraf":"^6.0.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","typescript":"^5.6.3","@types/react":"^18.3.12"},"peerDependencies":{"react":">=16"},"_npmOperationalInternal":{"tmp":"tmp/progress-bar-react_0.0.1_1731577890925_0.45427273665492063","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"@a-triki/progress-bar-react","version":"0.0.2","author":{"name":"Ahmed Triki"},"license":"ISC","_id":"@a-triki/progress-bar-react@0.0.2","maintainers":[{"name":"a-triki","email":"ahmed.triki.1996@gmail.com"}],"dist":{"shasum":"371b4fdd96b2580454b57352f30fd7aa7adb1abe","tarball":"https://registry.npmjs.org/@a-triki/progress-bar-react/-/progress-bar-react-0.0.2.tgz","fileCount":6,"integrity":"sha512-ESOaMdrFvNzbNAsI2w7p6sk3KbecJ9zzRI0H57allGZr0o5IK4kJQD5h31Mhz/x0pUdzV9wZWqXfVoIetAz9nA==","signatures":[{"sig":"MEUCIC9NV9RE64HNaeYIN0uuEjttDJZLWQk5c5/ZxKUcs7C/AiEAj4f4+c738p2KE8qz3mTywmWNFIpddwYBq0h5wSq673A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6536},"main":"dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"gitHead":"02ea4a6b9f179b5a29664ba81af9e93cb6219617","scripts":{"build":"tsc","clean":"rimraf dist","version":"npm publish","prebuild":"npm run clean","preversion":"npm run build"},"_npmUser":{"name":"a-triki","email":"ahmed.triki.1996@gmail.com"},"repository":{"url":"<https://github.com/Triki-Ahmed/progress-bar-react>","type":"git"},"_npmVersion":"10.9.0","description":"Dynamic React Progress Bar using html native element","directories":{},"_nodeVersion":"22.10.0","dependencies":{"clsx":"^2.1.1","rimraf":"^6.0.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","typescript":"^5.6.3","@types/react":"^18.3.12"},"peerDependencies":{"react":">=16"},"_npmOperationalInternal":{"tmp":"tmp/progress-bar-react_0.0.2_1731580278377_0.5334964455012459","host":"s3://npm-registry-packages"}},"0.0.3":{"name":"@a-triki/progress-bar-react","version":"0.0.3","description":"Dynamic React Progress Bar using html native element","main":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"scripts":{"clean":"rimraf dist","prebuild":"npm run clean","build":"tsc","preversion":"npm run build","version":"npm publish"},"repository":{"type":"git","url":"<https://github.com/Triki-Ahmed/progress-bar-react>"},"author":{"name":"Ahmed Triki"},"license":"ISC","devDependencies":{"@types/react":"^18.3.12","react":"^18.3.1","typescript":"^5.6.3"},"peerDependencies":{"react":">=16"},"dependencies":{"clsx":"^2.1.1","rimraf":"^6.0.1"},"_id":"@a-triki/progress-bar-react@0.0.3","gitHead":"19ac6900edfabc6ee51c391a70bd344756ee0a75","types":"./dist/index.d.ts","_nodeVersion":"22.10.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-qIM/9OOENwURqT82k3uhAe/HB+GGztlGJEcFtpiwhMb2zTh1wJ+lo35pUFm855qRJXrsWXDJpl8ovjzdQ3p2Xg==","shasum":"bd10060c054522b4aef4b1b88772e929f68aad77","tarball":"https://registry.npmjs.org/@a-triki/progress-bar-react/-/progress-bar-react-0.0.3.tgz","fileCount":6,"unpackedSize":6484,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCifC2ZMGExjYHMHfWwTVN4N9p9c9HRINkz1WpFFODitQIgKL0aoENUyBnzabldt1LDic7I2uUj/wtuQ1wW8BcBA1k="}]},"_npmUser":{"name":"a-triki","email":"ahmed.triki.1996@gmail.com"},"directories":{},"maintainers":[{"name":"a-triki","email":"ahmed.triki.1996@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/progress-bar-react_0.0.3_1731581194312_0.9038771722984438"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-14T09:51:30.797Z","modified":"2024-11-14T10:46:34.740Z","0.0.1":"2024-11-14T09:51:31.092Z","0.0.2":"2024-11-14T10:31:18.573Z","0.0.3":"2024-11-14T10:46:34.581Z"},"author":{"name":"Ahmed Triki"},"license":"ISC","repository":{"type":"git","url":"<https://github.com/Triki-Ahmed/progress-bar-react>"},"description":"Dynamic React Progress Bar using html native element","maintainers":[{"name":"a-triki","email":"ahmed.triki.1996@gmail.com"}],"readme":"# ProgressBar React Component\n\nThis is a flexible and customizable progress bar component for React.\n\n## Installation\n\nYou can install the `@a-triki/progress-bar-react` package via npm:\n\n```bash\nnpm i @a-triki/progress-bar-react\n```\n\n## Usage\n\nHere's an example of how to use the ProgressBar component in your React application:\n\n```ts\nimport React from \"react\";\nimport ProgressBar from \"@a-triki/progress-bar-react\";\n\nconst App = () => {\n\treturn (\n\t\t<ProgressBar\n\t\t\tvalue={50}\n\t\t\tmax={100}\n\t\t\tariaLabel=\"Progression de l'opération en cours\"\n\t\t\tprogressStyle={{ backgroundColor: \"#ff0000\" }}\n\t\t\tbarStyle={{ backgroundColor: \"#00ff00\" }}\n\t\t/>\n\t);\n};\n\nexport default App;\n```\n\n# Props\n\nHere are the props available for the `ProgressBar` component:\n\n## Default Props\n\n| Prop Name | Type   | Description                                                       |\n| --------- | ------ | ----------------------------------------------------------------- |\n| value     | number | The current value of the progress bar.                            |\n| max       | number | The maximum value of the progress bar.                            |\n| ...       | ...    | Other standard HTML progress element attributes can also be used. |\n\n## Custom Props\n\n| Prop Name     | Type          | Description                                        |\n| ------------- | ------------- | -------------------------------------------------- |\n| progressStyle | CSSProperties | Style for the progress bar element.                |\n| barStyle      | CSSProperties | Style for the bar element inside the progress bar. |\n\n## Conclusion\n\nThe `ProgressBar` component provides a flexible and customizable way to display progress bars in your React applications. With the ability to customize both the default and custom props, you have full control over the appearance and behavior of the progress bar.\n\nFeel free to use and customize the `ProgressBar` component to suit your specific needs and enhance the user experience in your applications.\n\nThank you for using the `ProgressBar` component! If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on GitHub. Your feedback is highly appreciated and will contribute to making this component even better for the community.\n","readmeFilename":"README.md"}