A all-in-one solution for building wizards in remix.run
yarn add remix-wizard
- Create a wizard and specify your
routes
oboarding.server.ts
export const onboardingWizard = createWizard({
name: 'onboarding-wizard',
routes: [
'/onboarding/org',
'/onboarding/users',
'/onboaring/finish'
],
});- Import your wizard and call
registerin your action
routes/onboarding/users.tsx
import { onboardingWizard } from './onboarding.server'
export const action = ({ request }) => {
const { save, nextStep, jumpToStep, prevStep } =
await onboardingWizard.register(request);
// Save arbitary data to the wizard session
save('userProfile', { name: 'John Doe' });
// Jump to a specific step
if (request.url.searchParams.get('skip')){
// You can do it by string
return jumpToStep("/onboarding/finish");
// Or by index
// return jumpToStep(3);
}
// Go to the next step
return nextStep();
}- Call
registerin your loader to access previously stored data
export const loader = async ({ request }) => {
const { data } = await onboardingWizard.register(request);
return data?.['userProfile'] || {};
};