{"_id":"@7hours/react-progress-bar","_rev":"6-1bb418ff0a8cd86abeb005725f436f59","name":"@7hours/react-progress-bar","dist-tags":{"latest":"1.0.6"},"versions":{"1.0.0":{"name":"@7hours/react-progress-bar","version":"1.0.0","description":"This is a customizable progress bar component for React applications. It visually represents progress through a series of steps, with options for adjusting colors, sizes, and styles to match different design requirements.","main":"index.js","scripts":{"test":"npm run test"},"author":{"name":"7hours"},"license":"ISC","dependencies":{"lucide-react":"^0.331.0"},"devDependencies":{},"_id":"@7hours/react-progress-bar@1.0.0","_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-gk0oIwlDgmqkC5/w2c30hjHUcNvJVWHtDbiY0vkuiOhD0YqDCfD2dUFDS7l+WJyXGMFUTIwjVIKxOoSC/je+yQ==","shasum":"7d610ec4142ef69865569e5939120189f3a24273","tarball":"https://registry.npmjs.org/@7hours/react-progress-bar/-/react-progress-bar-1.0.0.tgz","fileCount":4,"unpackedSize":7552,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCa9WrNEee1Bt15Aq2PXB09PBPIEWJS/NYuqSDdRQekNAIhAJNNIEYpig3m3mSgxPqvqN1oIF9Nmf60v8ZYPNHToo0c"}]},"_npmUser":{"name":"7hours","email":"rajiv840704@gmail.com"},"directories":{},"maintainers":[{"name":"7hours","email":"rajiv840704@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-progress-bar_1.0.0_1708253240584_0.8700995142379446"},"_hasShrinkwrap":false},"1.0.1":{"name":"@7hours/react-progress-bar","version":"1.0.1","description":"This is a customizable progress bar component for React applications. It visually represents progress through a series of steps, with options for adjusting colors, sizes, and styles to match different design requirements.","main":"index.js","scripts":{"test":"npm run test","build":"babel src -d dist"},"author":{"name":"7hours"},"license":"ISC","dependencies":{"lucide-react":"^0.331.0"},"devDependencies":{"@babel/cli":"^7.23.9","@babel/core":"^7.23.9","@babel/preset-env":"^7.23.9","@babel/preset-react":"^7.23.3"},"_id":"@7hours/react-progress-bar@1.0.1","_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-DDcI2VZOrabyEa4Hvap2Qn4KAQpRpWz9/zwO2ZVUOZeqOtvIs/wkHQ6S12STIXfDy3v1kySuAmrw8u6VGKoW3w==","shasum":"0bf4641761f12d4a90bf2293712df7b9da107b8f","tarball":"https://registry.npmjs.org/@7hours/react-progress-bar/-/react-progress-bar-1.0.1.tgz","fileCount":6,"unpackedSize":15832,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDh2NkZVtDumqPX/HP9nWy6V85GBox2aS8VMJ35q8/5egIhAKjwaoENj6JIX/BFXNfFGz/z1AAM3wAzdnQo7KGsKW61"}]},"_npmUser":{"name":"7hours","email":"rajiv840704@gmail.com"},"directories":{},"maintainers":[{"name":"7hours","email":"rajiv840704@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-progress-bar_1.0.1_1708254023825_0.7812700137608171"},"_hasShrinkwrap":false},"1.0.2":{"name":"@7hours/react-progress-bar","version":"1.0.2","description":"This is a customizable progress bar component for React applications. It visually represents progress through a series of steps, with options for adjusting colors, sizes, and styles to match different design requirements.","main":"index.js","scripts":{"test":"npm run test","build":"babel src -d dist"},"author":{"name":"7hours"},"license":"ISC","dependencies":{"lucide-react":"^0.331.0"},"devDependencies":{"@babel/cli":"^7.23.9","@babel/core":"^7.23.9","@babel/preset-env":"^7.23.9","@babel/preset-react":"^7.23.3"},"_id":"@7hours/react-progress-bar@1.0.2","_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-nZV+/r9c1pMg2t/O835vVohniaUy3Aq/K4+YLXKdBKIBv2kVxsmP97DubUBjXT5T6C5mGhI9kTPep4yWCrYV7g==","shasum":"cb0210a00a5f69d58ab1a4495949c056dfb9cf2f","tarball":"https://registry.npmjs.org/@7hours/react-progress-bar/-/react-progress-bar-1.0.2.tgz","fileCount":7,"unpackedSize":18554,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBTF6YXRPLys75Vs+u6tVw1jdQm2T/WclCvPGMunhDraAiEArqHYlWGp8GTa+kz/mr0l3k69UpPi8g1/hKYwFOZBuxc="}]},"_npmUser":{"name":"7hours","email":"rajiv840704@gmail.com"},"directories":{},"maintainers":[{"name":"7hours","email":"rajiv840704@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-progress-bar_1.0.2_1708254184707_0.7246567557595274"},"_hasShrinkwrap":false},"1.0.3":{"name":"@7hours/react-progress-bar","version":"1.0.3","description":"This is a customizable progress bar component for React applications. It visually represents progress through a series of steps, with options for adjusting colors, sizes, and styles to match different design requirements.","main":"index.js","scripts":{"test":"npm run test","build":"babel src -d dist"},"author":{"name":"7hours"},"license":"ISC","dependencies":{"lucide-react":"^0.331.0"},"devDependencies":{"@babel/cli":"^7.23.9","@babel/core":"^7.23.9","@babel/preset-env":"^7.23.9","@babel/preset-react":"^7.23.3"},"_id":"@7hours/react-progress-bar@1.0.3","_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-Liy5MnBSKhMOC4KTFDoWuhXxVr6LkyJoEyywulTg0TmWuWXFwOuP5s9UJ3NK16DY9Tlh28EHFOxJvRxwATV6dA==","shasum":"ecd4301304330785fedb51d5a857f91f86edb6a2","tarball":"https://registry.npmjs.org/@7hours/react-progress-bar/-/react-progress-bar-1.0.3.tgz","fileCount":7,"unpackedSize":19548,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFz0Odf2nyvs7mCneaOcOTTdPl+ul/+jIoqwntJLstSQAiBBZUIxmcaFa6QhapdAx5D3M54iDD96BfMJV8Y9ccQIdQ=="}]},"_npmUser":{"name":"7hours","email":"rajiv840704@gmail.com"},"directories":{},"maintainers":[{"name":"7hours","email":"rajiv840704@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-progress-bar_1.0.3_1708254337753_0.11412263886806628"},"_hasShrinkwrap":false},"1.0.4":{"name":"@7hours/react-progress-bar","version":"1.0.4","description":"This is a customizable progress bar component for React applications. It visually represents progress through a series of steps, with options for adjusting colors, sizes, and styles to match different design requirements.","keywords":["react","react-progress-bar","component","ui","library","@7hours"],"repository":{"type":"git","url":"git+https://github.com/7hourspg/react-progress-bar.git"},"homepage":"https://github.com/7hourspg/react-progress-bar#readme","main":"index.js","scripts":{"test":"npm run test","build":"babel src -d dist"},"author":{"name":"7hours"},"license":"ISC","dependencies":{"lucide-react":"^0.331.0"},"devDependencies":{"@babel/cli":"^7.23.9","@babel/core":"^7.23.9","@babel/preset-env":"^7.23.9","@babel/preset-react":"^7.23.3"},"_id":"@7hours/react-progress-bar@1.0.4","gitHead":"e1983abd716d551f2d4f75366715127e90457227","bugs":{"url":"https://github.com/7hourspg/react-progress-bar/issues"},"_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-xE30r9MlgNrQbPL2E/LVmi7PeVn29uU4+rxyGEkaDYKtphVaNovzuYrwYPSbeZHChxeElNvZEfDqPd0p1llIjQ==","shasum":"650cc71ad98928551fac0a904c7ef59e976d0ae8","tarball":"https://registry.npmjs.org/@7hours/react-progress-bar/-/react-progress-bar-1.0.4.tgz","fileCount":7,"unpackedSize":21215,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEKW/URXnplAZq9dT4NwJIXohS0uRCL10B6tRAZQylK4AiBu+QFY3jqq2ZVRrpfFugtZmwncWx5zNciFKxjOqx7WgQ=="}]},"_npmUser":{"name":"7hours","email":"rajiv840704@gmail.com"},"directories":{},"maintainers":[{"name":"7hours","email":"rajiv840704@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-progress-bar_1.0.4_1708275896270_0.1728727253255964"},"_hasShrinkwrap":false},"1.0.5":{"name":"@7hours/react-progress-bar","version":"1.0.5","description":"This is a customizable progress bar component for React applications. It visually represents progress through a series of steps, with options for adjusting colors, sizes, and styles to match different design requirements.","keywords":["react","react-progress-bar","component","ui","library","@7hours"],"repository":{"type":"git","url":"git+https://github.com/7hourspg/react-progress-bar.git"},"homepage":"https://github.com/7hourspg/react-progress-bar#readme","main":"index.js","scripts":{"test":"npm run test","build":"babel src -d dist"},"author":{"name":"7hours"},"license":"ISC","devDependencies":{"@babel/cli":"^7.23.9","@babel/core":"^7.23.9","@babel/preset-env":"^7.23.9","@babel/preset-react":"^7.23.3"},"_id":"@7hours/react-progress-bar@1.0.5","gitHead":"0ac66a969ec89d33042d2a7c73e8ca16ff38378d","bugs":{"url":"https://github.com/7hourspg/react-progress-bar/issues"},"_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-U7rghduq8eXA3Ll8ihrBwMymV1fHhdFXigva0kaDwn2Ov35pGJSf0p21S3AvvvSVfmM7ZhkXQX8nZoLFYFn7Ug==","shasum":"3be66ea0841776f701c8a4d20067ea977c1e6663","tarball":"https://registry.npmjs.org/@7hours/react-progress-bar/-/react-progress-bar-1.0.5.tgz","fileCount":8,"unpackedSize":21831,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICibJ3Nbmv5H2H1oIFE4tagx+gnJbxYTY6tt3Umj/f3FAiALlBPiLngyc8Pa77Mx1JeYHNDkTVUwlw0GdJXru8Kohw=="}]},"_npmUser":{"name":"7hours","email":"rajiv840704@gmail.com"},"directories":{},"maintainers":[{"name":"7hours","email":"rajiv840704@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-progress-bar_1.0.5_1708361692031_0.9876386253038592"},"_hasShrinkwrap":false},"1.0.6":{"name":"@7hours/react-progress-bar","version":"1.0.6","description":"This is a customizable progress bar component for React applications. It visually represents progress through a series of steps, with options for adjusting colors, sizes, and styles to match different design requirements.","keywords":["react","react-progress-bar","component","ui","library","@7hours"],"repository":{"type":"git","url":"git+https://github.com/7hourspg/react-progress-bar.git"},"homepage":"https://github.com/7hourspg/react-progress-bar#readme","main":"index.js","scripts":{"test":"npm run test","build":"babel src -d dist"},"author":{"name":"7hours"},"license":"ISC","devDependencies":{"@babel/cli":"^7.23.9","@babel/core":"^7.23.9","@babel/preset-env":"^7.23.9","@babel/preset-react":"^7.23.3"},"_id":"@7hours/react-progress-bar@1.0.6","gitHead":"0ac66a969ec89d33042d2a7c73e8ca16ff38378d","bugs":{"url":"https://github.com/7hourspg/react-progress-bar/issues"},"_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-HGA4m5bDCYflhs6YOsAiAyJ2ER4lw55weuPJYQMXQGxyuGQBu70Cm7nnMY+fn3UPmHCu7l6v7GBUM4z/+ufxlQ==","shasum":"bc15d17f5b2b7b483d23e94ed1e7e875c1e5d26d","tarball":"https://registry.npmjs.org/@7hours/react-progress-bar/-/react-progress-bar-1.0.6.tgz","fileCount":8,"unpackedSize":21664,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDW+89obPpUCpQks8L366UT47rZNbO0qFsllrHpC0p9xAiBK2eY8zLpHUTbBmGe4/zjIfzRzrukmwX9RDJufTXanpA=="}]},"_npmUser":{"name":"7hours","email":"rajiv840704@gmail.com"},"directories":{},"maintainers":[{"name":"7hours","email":"rajiv840704@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-progress-bar_1.0.6_1708362209251_0.23892955636337554"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-18T10:47:20.507Z","1.0.0":"2024-02-18T10:47:20.774Z","modified":"2024-02-19T17:03:30.087Z","1.0.1":"2024-02-18T11:00:24.000Z","1.0.2":"2024-02-18T11:03:04.865Z","1.0.3":"2024-02-18T11:05:37.971Z","1.0.4":"2024-02-18T17:04:56.447Z","1.0.5":"2024-02-19T16:54:52.178Z","1.0.6":"2024-02-19T17:03:29.399Z"},"maintainers":[{"name":"7hours","email":"rajiv840704@gmail.com"}],"description":"This is a customizable progress bar component for React applications. It visually represents progress through a series of steps, with options for adjusting colors, sizes, and styles to match different design requirements.","author":{"name":"7hours"},"license":"ISC","readme":"# A React Progress Bar Component\r\n\r\nA customizable progress bar React component to visualize progress through a series of steps.\r\n\r\n![Screenshot 2024-02-18 222140](https://github.com/7hourspg/react-progress-bar/assets/98067649/4a60c452-154e-4156-8d33-31f98bbcccba)\r\n\r\n## Installation\r\n\r\nYou can install the `@7hours/react-progress-bar` package via npm:\r\n\r\n```bash\r\nnpm install @7hours/react-progress-bar\r\n```\r\n\r\nOr using yarn:\r\n\r\n```bash\r\nyarn add @7hours/react-progress-bar\r\n```\r\n\r\n## Usage\r\n\r\n```js\r\nimport React from \"react\";\r\nimport ProgressBar from \"@7hours/react-progress-bar\"\r\n\r\nconst steps = [\"Order Placed\", \"Processing\", \"Shipped\", \"Delivered\"];\r\nconst currentStep = 1;\r\nconst height = 10;\r\nconst completedColor = \"green\";\r\nconst incompleteColor = \"gray\";\r\nconst stepCompleteTextColor = \"green\";\r\nconst stepInCompleteTextColor = \"gray\";\r\nconst stepContainerSize = 24;\r\nconst stepFont = {\r\n fontFamily: \"JetBrains Mono\",\r\n fontSize: \"16px\",\r\n fontWeight: \"bold\",\r\n};\r\n\r\nconst App = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default App;\r\n```\r\n\r\n## Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------------------------------|---------------|---------------|-----------------------------------------------------------------------------------------------------------------|\r\n| steps | array[string] | Required | An array of strings representing the steps in the progress bar. |\r\n| currentStep | number | Required | The index of the current step (zero-based). |\r\n| height | number | 6 | The height of the progress bar. |\r\n| completedColor | string | \"green\" | The color of the completed portion of the progress bar. |\r\n| incompleteColor | string | \"gray\" | The color of the incomplete portion of the progress bar. |\r\n| icon | element | Star | The icon to be displayed within each step. |\r\n| stepContainerSize | number | 24 | The size of the step container. |\r\n| stepContainerActiveColor | string | \"green\" | The color of the active step container. |\r\n| stepContainerInactiveColor | string | \"gray\" | The color of the inactive step container. |\r\n| stepCompleteTextColor | string | \"green\" | The text color of completed steps. |\r\n| stepInCompleteTextColor | string | \"gray\" | The text color of incomplete steps. |\r\n| stepFont | object | | An object specifying the font properties for the step text. |\r\n\r\n\r\n## Contributing\r\n\r\nContributions, feature requests, and bug reports are welcome! If you encounter any issues, have suggestions for new features, or find bugs, please don't hesitate to open an issue on [GitHub](https://github.com/7hourspg/react-progress-bar.git).\r\n\r\nIf you'd like to contribute to the project, feel free to fork the repository and submit a pull request with your changes.\r\n\r\nYour feedback and contributions are valuable and greatly appreciated!\r\n\r\n\r\n## Credits\r\n\r\n- **Author**: [7hours](https://github.com/7hourspg)\r\n","readmeFilename":"README.md","homepage":"https://github.com/7hourspg/react-progress-bar#readme","keywords":["react","react-progress-bar","component","ui","library","@7hours"],"repository":{"type":"git","url":"git+https://github.com/7hourspg/react-progress-bar.git"},"bugs":{"url":"https://github.com/7hourspg/react-progress-bar/issues"}}