Step Callbacks
Execute async operations when entering or leaving a step. Use onEnter to load data and onExit to validate before proceeding.
Key Features
- 1onEnter Callback
Load data, pre-fill fields, or setup when entering a step
- 2onExit Callback
Validate via API, save progress, or block navigation
- 3Step Data Storage
Use
setStepData/getStepDatafor temporary data - 4Direction Aware
Know if user is moving forward or backward with
direction
User Verification with Step Callbacks
Watch the console for callback logs. Use code 123456 for demo verification.
CONFIG
const config: WizardConfig = {
id: 'user-verification',
steps: [
{
id: 'email-verification',
title: 'Email',
// Called when entering the step
// Return an object to pre-fill fields
onEnter: async (formData) => {
const savedEmail = localStorage.getItem('user_email');
if (savedEmail && !formData.email) {
return { email: savedEmail }; // Pre-fill email
}
return undefined;
},
// Called when leaving the step
// Return false to block, string for error message
onExit: async (formData) => {
const isValid = await validateEmailAPI(formData.email);
if (!isValid) return false; // Block navigation
return undefined; // Allow navigation
},
fieldGroups: [/* ... */],
},
{
id: 'verification-code',
title: 'Verify',
onEnter: async (formData) => {
// Send verification code
await sendVerificationCode(formData.email);
return undefined;
},
// Use canProceed for custom validation logic
canProceed: (formData) => {
if (formData.verificationCode === expectedCode) {
return true;
}
return 'Invalid verification code';
},
fieldGroups: [/* ... */],
},
],
};PREVIEW
How It Works
onEnter receives:
formData- Current form valuessetFieldValue- Pre-fill fieldssetStepData- Store step-specific data
onExit receives the same plus:
direction- "forward" or "backward"getStepData- Retrieve stored data
Return true to allow navigation, false or a string message to block.