Multi-Step Portal
A logic-heavy component for managing linear workflows and complex on-boarding forms.
Multi-Step Portal
Managing "Next" and "Previous" state across 5 different form sections is tedious. MultiStepPortal abstracts the state, the progress logic, and the navigation UI into one component.
How To Use
Configuration
Define your steps as an array of objects and pass them in.
const steps = [
{ title: "Account", content: <AccountForm /> },
{ title: "Plan", content: <PlanSelector /> }
];
<MultiStepPortal
steps={steps}
onComplete={(data) => console.log(data)}
/>
Preview
1
Account
2
Profile
3
Settings
Account
Setup your basic credentials
✨ Key Features
- Automated Progress: Visual timeline updates as you move through steps.
- State Isolation: Each step is its own component; the portal handles the transition animation.
- Flexible Content: Steps can contain forms, images, or interactive selection tools.
- Completion Hook: A unified callback for when the user hits "Finish".
🛡️ Solves...
...the frequent need for complex on-boarding or multi-page wizards without polluting your parent components with step === 1 ? ... : ... logic.