{"_id":"@akshay641/react-step-progress-bar","_rev":"8-a6b281a70c4787ae75a2a7752ca1303b","name":"@akshay641/react-step-progress-bar","dist-tags":{"latest":"0.1.6"},"versions":{"0.1.0":{"name":"@akshay641/react-step-progress-bar","version":"0.1.0","keywords":["react","stepper","progress","component"],"author":{"name":"Akshay Kumar"},"license":"MIT","_id":"@akshay641/react-step-progress-bar@0.1.0","maintainers":[{"name":"akshay641","email":"akshay64126@gmail.com"}],"dist":{"shasum":"0f81b0bf6401c190dfa5352b5af17cba108fc54d","tarball":"https://registry.npmjs.org/@akshay641/react-step-progress-bar/-/react-step-progress-bar-0.1.0.tgz","fileCount":12,"integrity":"sha512-tMf7o7ukRmyhoLWkM61QvrpMIHIhkSFG7SpZ87oJQDCjo0UgUi4arC1S7HBC8l+1HzUhedgYsWnM2rsalT1v/Q==","signatures":[{"sig":"MEUCIHa5mjV/scHhyOkwa1yZSvJ2rIp8eKugnV6wIDSeIGgnAiEA00zyVx9WQoNI8nbR5zF/k43WG77AiiR4HNN1sYuJPqg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17118},"main":"dist/index.js","module":"dist/index.esm.js","source":"src/index.js","scripts":{"build":"microbundle","prepublishOnly":"npm run build"},"_npmUser":{"name":"akshay641","email":"akshay64126@gmail.com"},"_npmVersion":"10.9.2","description":"A customizable React stepper progress component.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"microbundle":"^0.14.0"},"peerDependencies":{"react":">=16.8.0","prop-types":"^15.7.2"},"_npmOperationalInternal":{"tmp":"tmp/react-step-progress-bar_0.1.0_1741212210163_0.9996682182917567","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@akshay641/react-step-progress-bar","version":"0.1.1","keywords":["react","stepper","progress","component"],"author":{"name":"Akshay Kumar"},"license":"MIT","_id":"@akshay641/react-step-progress-bar@0.1.1","maintainers":[{"name":"akshay641","email":"akshay64126@gmail.com"}],"dist":{"shasum":"b822c6dbc039dcb19698fc64a85f1edec5a35ed0","tarball":"https://registry.npmjs.org/@akshay641/react-step-progress-bar/-/react-step-progress-bar-0.1.1.tgz","fileCount":12,"integrity":"sha512-/oEJrDjXJJnOV8UtXor5kYlB8g1rc3gZfB6YFI/qH4CuIKZRJA3vmGbFluXRDBmu8z2spZMWr4QWzY3pLfjk5Q==","signatures":[{"sig":"MEYCIQD2siKT7FeNHNUBV+c7GWYp7+ZY8RIQCWgZI9D7TntTOAIhAPXtyiFLG+BAqhayIQbTldSEtLN41f1D6Aq+NHW7lrhB","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23581},"main":"dist/index.js","module":"dist/index.esm.js","source":"src/index.js","scripts":{"build":"microbundle","prepublishOnly":"npm run build"},"_npmUser":{"name":"akshay641","email":"akshay64126@gmail.com"},"_npmVersion":"10.9.2","description":"A customizable React stepper progress component.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"microbundle":"^0.14.0"},"peerDependencies":{"react":">=16.8.0","prop-types":"^15.7.2"},"_npmOperationalInternal":{"tmp":"tmp/react-step-progress-bar_0.1.1_1741212985533_0.28581796164965545","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@akshay641/react-step-progress-bar","version":"0.1.2","keywords":["react","stepper","progress","component"],"author":{"name":"Akshay Kumar"},"license":"MIT","_id":"@akshay641/react-step-progress-bar@0.1.2","maintainers":[{"name":"akshay641","email":"akshay64126@gmail.com"}],"dist":{"shasum":"d1d240845007542d84ed7096fcb32972c84044a9","tarball":"https://registry.npmjs.org/@akshay641/react-step-progress-bar/-/react-step-progress-bar-0.1.2.tgz","fileCount":12,"integrity":"sha512-s8OJM49+V5wB8C93UmsLFHz8R94bnJKFjzIojUUaGkWuKGvXM4q2nSEHsvm0272E+WHAvBcB0zN5k8E4miwvyg==","signatures":[{"sig":"MEUCIAJlTMYcsp42s9vgHq62csvga0Hehq3tS/afWTAxoqimAiEAhqHbR0RMV6ln6opa1sSqmGt2fB+sZrELOvyWxBSOrfg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20035},"main":"dist/index.js","module":"dist/index.esm.js","source":"src/index.js","scripts":{"build":"microbundle","prepublishOnly":"npm run build"},"_npmUser":{"name":"akshay641","email":"akshay64126@gmail.com"},"_npmVersion":"10.9.2","description":"A customizable React stepper progress component.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"microbundle":"^0.14.0"},"peerDependencies":{"react":">=16.8.0","prop-types":"^15.7.2"},"_npmOperationalInternal":{"tmp":"tmp/react-step-progress-bar_0.1.2_1741213333445_0.016098504128923885","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@akshay641/react-step-progress-bar","version":"0.1.3","keywords":["react","stepper","progress","component"],"author":{"name":"Akshay Kumar"},"license":"MIT","_id":"@akshay641/react-step-progress-bar@0.1.3","maintainers":[{"name":"akshay641","email":"akshay64126@gmail.com"}],"dist":{"shasum":"da040276f46dd047b5cd82da1c8641f28c6c9d30","tarball":"https://registry.npmjs.org/@akshay641/react-step-progress-bar/-/react-step-progress-bar-0.1.3.tgz","fileCount":12,"integrity":"sha512-/49yUrADloZEAPFlg+CDeTMZnHLq7QI+/UjvBG/kR0jXwQjTOBSC+WpwoPSXJCFl72Gi6upzJK5aTLzxjYBTFw==","signatures":[{"sig":"MEUCIDsIIp4ic29Oq8H3X3izpuThiuZgnEIF/sel6wybKmNHAiEA3j3bcVFN2qWhKhAAXr6H4iz6qrx7fzDGtDfujXbNX/s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20044},"main":"dist/index.js","module":"dist/index.esm.js","source":"src/index.js","scripts":{"build":"microbundle","prepublishOnly":"npm run build"},"_npmUser":{"name":"akshay641","email":"akshay64126@gmail.com"},"_npmVersion":"10.9.2","description":"A customizable React stepper progress component.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"microbundle":"^0.14.0"},"peerDependencies":{"react":">=16.8.0","prop-types":"^15.7.2"},"_npmOperationalInternal":{"tmp":"tmp/react-step-progress-bar_0.1.3_1741213458446_0.9725851430040522","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@akshay641/react-step-progress-bar","version":"0.1.4","keywords":["react","stepper","progress","component"],"author":{"name":"Akshay Kumar"},"license":"MIT","_id":"@akshay641/react-step-progress-bar@0.1.4","maintainers":[{"name":"akshay641","email":"akshay64126@gmail.com"}],"dist":{"shasum":"20adac30c40891accc267219f719d6846127263a","tarball":"https://registry.npmjs.org/@akshay641/react-step-progress-bar/-/react-step-progress-bar-0.1.4.tgz","fileCount":12,"integrity":"sha512-ZO1J2DhhJEIbeOq7gmj64+PHSBZXjDkX9EShm1+/RV8IHCRU5wJwzwznQmmZJKR7y2XNCRKzcFE1l3Apn7C0HQ==","signatures":[{"sig":"MEYCIQCFRDOofXQpUQpipW/Z+RIURh50eKgFe0Z64L+hvFhxKAIhAMOD3Imk0wHOWR5pkL6IzXkDEHlAwJ79R0FXyEIekgPn","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20048},"main":"dist/index.js","module":"dist/index.esm.js","source":"src/index.js","scripts":{"build":"microbundle","prepublishOnly":"npm run build"},"_npmUser":{"name":"akshay641","email":"akshay64126@gmail.com"},"_npmVersion":"10.9.2","description":"A customizable React stepper progress component.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"microbundle":"^0.14.0"},"peerDependencies":{"react":">=16.8.0","prop-types":"^15.7.2"},"_npmOperationalInternal":{"tmp":"tmp/react-step-progress-bar_0.1.4_1741213560855_0.589525051957948","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@akshay641/react-step-progress-bar","version":"0.1.5","keywords":["react","stepper","progress","component"],"author":{"name":"Akshay Kumar"},"license":"MIT","_id":"@akshay641/react-step-progress-bar@0.1.5","maintainers":[{"name":"akshay641","email":"akshay64126@gmail.com"}],"dist":{"shasum":"54384d49694c24207095e1a7f4eceb01f29517da","tarball":"https://registry.npmjs.org/@akshay641/react-step-progress-bar/-/react-step-progress-bar-0.1.5.tgz","fileCount":13,"integrity":"sha512-dR6HMY5TlN34+jO47lS3JwqyOqzlLG0nt4KYEGXmLk8OpEaNAh7Cp7/vkgDHoOZzitj2iQ5l6PQzcVuE9Q6WBQ==","signatures":[{"sig":"MEUCIQDipm753Xh3t6hgbvz/0rTz0NEHTzRqe3S7wdlx4s8DwwIgSIhugthqxXn1uJzX2Jrea2YHWBjYp/FJ4dYMX7KHw2M=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21041},"main":"dist/index.js","module":"dist/index.esm.js","source":"src/index.js","scripts":{"build":"microbundle","prepublishOnly":"npm run build"},"_npmUser":{"name":"akshay641","email":"akshay64126@gmail.com"},"_npmVersion":"10.9.2","description":"A customizable React stepper progress component.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"microbundle":"^0.14.0"},"peerDependencies":{"react":">=16.8.0","prop-types":"^15.7.2"},"_npmOperationalInternal":{"tmp":"tmp/react-step-progress-bar_0.1.5_1741213839980_0.12045782883728906","host":"s3://npm-registry-packages-npm-production"}},"0.1.6":{"name":"@akshay641/react-step-progress-bar","version":"0.1.6","keywords":["react","stepper","progress","component"],"author":{"name":"Akshay Kumar"},"license":"MIT","_id":"@akshay641/react-step-progress-bar@0.1.6","maintainers":[{"name":"akshay641","email":"akshay64126@gmail.com"}],"dist":{"shasum":"d61d2115e6a74f654e10a663c74279e0130a85f7","tarball":"https://registry.npmjs.org/@akshay641/react-step-progress-bar/-/react-step-progress-bar-0.1.6.tgz","fileCount":13,"integrity":"sha512-vp1vb3lGdRC4IsVaGUaTTCA/fOPZEC3Ot1sysnscFcqDmLousCZDG8k6boQeKnbbCFExzaQ052K2V2dRBXfzqQ==","signatures":[{"sig":"MEUCIF+68t2gE7Em4/WoC8Ctr+msiXDDqKtqN9Uwz1nwx5IFAiEAlKYABKqp+A/OzYZBUVWgloggAg+2Gm129MPa0kOI/Ks=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21045},"main":"dist/index.js","module":"dist/index.esm.js","source":"src/index.js","scripts":{"build":"microbundle","prepublishOnly":"npm run build"},"_npmUser":{"name":"akshay641","email":"akshay64126@gmail.com"},"_npmVersion":"10.9.2","description":"A customizable React stepper progress component.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"microbundle":"^0.14.0"},"peerDependencies":{"react":">=16.8.0","prop-types":"^15.7.2"},"_npmOperationalInternal":{"tmp":"tmp/react-step-progress-bar_0.1.6_1741213994034_0.9539654029048874","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-03-05T22:03:30.096Z","modified":"2025-03-11T12:45:50.787Z","0.1.0":"2025-03-05T22:03:30.355Z","0.1.1":"2025-03-05T22:16:25.718Z","0.1.2":"2025-03-05T22:22:13.632Z","0.1.3":"2025-03-05T22:24:18.613Z","0.1.4":"2025-03-05T22:26:01.030Z","0.1.5":"2025-03-05T22:30:40.159Z","0.1.6":"2025-03-05T22:33:14.223Z"},"author":{"name":"Akshay Kumar"},"license":"MIT","keywords":["react","stepper","progress","component"],"description":"A customizable React stepper progress component.","maintainers":[{"email":"akshay64126@gmail.com","name":"akshay64126"}],"readme":"# React Step Progress Bar\r\n\r\nA customizable stepper progress component for React. This lightweight component displays a multi-step progress bar that can be easily integrated into any React application, making it perfect for forms, wizards, or onboarding flows.\r\n\r\n## Features\r\n\r\n- **Customizable:** Easily configure the total number of steps, the current active step, colors, dimensions, and more.\r\n- **Responsive:** Automatically adjusts to the container size.\r\n- **Lightweight:** Minimal dependencies and a simple API for quick integration.\r\n- **Easy to Use:** Plug and play with a clear and intuitive interface.\r\n\r\n## Installation\r\n\r\nInstall the package via npm:\r\n\r\n```bash\r\nnpm install @akshay641/react-step-progress-bar\r\n\r\n```\r\nAfter installing, import and use the component in your React application:\r\n\r\n![Screenshot Description](./src/images/stepper-img.png)\r\n\r\n## Usage \r\nAfter installing, import and use the component in your React application:\r\n\r\n```import React, { useState } from \"react\";\r\nimport Stepper from \"@akshay641/react-step-progress-bar\";\r\n\r\nconst App = () => {\r\n  const totalSteps = 4;\r\n  const [currentStep, setCurrentStep] = useState(0);\r\n\r\n  const handleNext = () => {\r\n    if (currentStep < totalSteps - 1) {\r\n      setCurrentStep(currentStep + 1);\r\n    } else {\r\n      // Handle final step (e.g., submission)\r\n      console.log(\"All steps completed!\");\r\n    }\r\n  };\r\n\r\n  const handleBack = () => {\r\n    if (currentStep > 0) {\r\n      setCurrentStep(currentStep - 1);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div>\r\n      <Stepper totalSteps={totalSteps} currentStep={currentStep} />\r\n      <div style={{ marginTop: \"20px\" }}>\r\n        <button onClick={handleBack} disabled={currentStep === 0}>\r\n          Back\r\n        </button>\r\n        <button onClick={handleNext}>Next</button>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default App;\r\n```\r\n## Props\r\n\r\n| Prop         | Type   | Default    | Description                                        |\r\n|--------------|--------|------------|----------------------------------------------------|\r\n| totalSteps   | number | Required   | Total number of steps in the progress bar.         |\r\n| currentStep  | number | Required   | The index of the current active step (zero-based). |\r\n| activeColor  | string | #0E66CE    | Background color for completed or active steps.    |\r\n| inactiveColor| string | gray       | Background color for pending or inactive steps.    |\r\n| height       | string | 4px        | Height of each progress segment.                   |\r\n| margin       | string | 0 0.5rem   | Margin around each segment.                        |\r\n| borderRadius | string | 9px        | Border radius for the progress segments.           |\r\n| className    | string | \"\"         | Additional CSS classes for the container.          |\r\n\r\nCustomization\r\nYou can tailor the component's look and feel by adjusting the props. For example:\r\n```\r\n<Stepper\r\n  totalSteps={4}\r\n  currentStep={2}\r\n  activeColor=\"#28a745\"       // Active steps will be green.\r\n  inactiveColor=\"#e0e0e0\"     // Inactive steps will be light gray.\r\n  height=\"6px\"\r\n  margin=\"0 0.3rem\"\r\n  borderRadius=\"3px\"\r\n/>\r\n```\r\n","readmeFilename":"Readme.md"}