StepZilla - a great React Form/Page Wizard that works well with Meteor
I stumbled across this just recently when I was reviewing my code.
About 12 months I had to build something almost exactly the same as this to be able to provide a set of steps (with a progress line at the top) for form completion. I called my component MultiStep.
The principle is simple... Stuff your steps (plus a bit of metadata) into an array that forms the pages you want to display in order, throw in some next and previous buttons and you have a Wizard type page. Allow each page to validate its’ own data before going on to the next step and provide some tools to be able to jump around in the navigation if you need to.
I am surprised at the similarities between MultiStep and StepZilla (given I never published my code) but I must say that StepZilla has the isolation down really well by getting each page component to expose an isValidated method that the wrapper can check before progressing forward.
There is one little “gotcha” though...
If you are loading in data using Meteor’s createContainer then you need to do all your subscriptions up in the wrapping component and not in the pages. This is due to the fact that the public methods you expose in the page components will no longer be visible as they are wrapped in the <MeteorDataContainer /> component which does not expose the methods on the wrapped component.
