| <!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>docs/api/components/wizard-view | react-declarative</title><meta name="description" content="Documentation for react-declarative"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">react-declarative</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">react-declarative</a></li><li><a href="docs_api_components_wizard-view.html">docs/api/components/wizard-view</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="wizardview-props-steps-routes-and-navigation" class="tsd-anchor"></a><h1 class="tsd-anchor-link">WizardView props: steps, routes, and navigation<a href="#wizardview-props-steps-routes-and-navigation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><p><code>WizardView</code> renders a multi-step wizard backed by an internal router. The stepper header at the top highlights the active step; the content area renders whichever route outlet is active for the current <code>pathname</code>. Steps and routes are defined separately: <code>steps</code> controls what appears in the stepper header and <code>routes</code> maps URL paths to outlet components. The component is generic over <code>Data</code> (the form data flowing through the wizard), <code>Payload</code> (context forwarded to outlet props), and <code>Params</code> (optional route parameters).</p> |
| <p><code>WizardView</code> also ships a companion <code>WizardNavigation</code> component — a pre-built previous/next button bar you place inside your outlet components.</p> |
| <pre><code class="tsx"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">WizardView</span><span class="hl-1">, </span><span class="hl-2">WizardNavigation</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"react-declarative"</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">createBrowserHistory</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"history"</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">history</span><span class="hl-1"> = </span><span class="hl-5">createBrowserHistory</span><span class="hl-1">();</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">steps</span><span class="hl-1"> = [</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-3">"contact"</span><span class="hl-1">, </span><span class="hl-2">label:</span><span class="hl-1"> </span><span class="hl-3">"Contact info"</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-3">"review"</span><span class="hl-1">, </span><span class="hl-2">label:</span><span class="hl-1"> </span><span class="hl-3">"Review"</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-3">"confirm"</span><span class="hl-1">, </span><span class="hl-2">label:</span><span class="hl-1"> </span><span class="hl-3">"Confirm"</span><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">routes</span><span class="hl-1"> = [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-3">"contact"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">isActive</span><span class="hl-2">:</span><span class="hl-1"> (</span><span class="hl-2">path</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-2">path</span><span class="hl-1"> === </span><span class="hl-3">"/contact"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">element</span><span class="hl-2">:</span><span class="hl-1"> ({ </span><span class="hl-2">history</span><span class="hl-1">, </span><span class="hl-2">onSubmit</span><span class="hl-1"> }) </span><span class="hl-4">=></span><span class="hl-1"> (</span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-18">div</span><span class="hl-6">></span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-18">p</span><span class="hl-6">></span><span class="hl-1">Step 1 content</span><span class="hl-6"></</span><span class="hl-18">p</span><span class="hl-6">></span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-7">WizardNavigation</span><br/><span class="hl-1"> </span><span class="hl-8">hasNext</span><br/><span class="hl-1"> </span><span class="hl-8">onNext</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-9">() </span><span class="hl-4">=></span><span class="hl-9"> </span><span class="hl-2">history</span><span class="hl-9">.</span><span class="hl-5">replace</span><span class="hl-9">(</span><span class="hl-3">"/review"</span><span class="hl-9">)</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-6">/></span><br/><span class="hl-1"> </span><span class="hl-6"></</span><span class="hl-18">div</span><span class="hl-6">></span><br/><span class="hl-1"> ),</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-3">"review"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">isActive</span><span class="hl-2">:</span><span class="hl-1"> (</span><span class="hl-2">path</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-2">path</span><span class="hl-1"> === </span><span class="hl-3">"/review"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">element</span><span class="hl-2">:</span><span class="hl-1"> ({ </span><span class="hl-2">history</span><span class="hl-1"> }) </span><span class="hl-4">=></span><span class="hl-1"> (</span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-18">div</span><span class="hl-6">></span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-18">p</span><span class="hl-6">></span><span class="hl-1">Step 2 content</span><span class="hl-6"></</span><span class="hl-18">p</span><span class="hl-6">></span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-7">WizardNavigation</span><br/><span class="hl-1"> </span><span class="hl-8">hasPrev</span><br/><span class="hl-1"> </span><span class="hl-8">hasNext</span><br/><span class="hl-1"> </span><span class="hl-8">onPrev</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-9">() </span><span class="hl-4">=></span><span class="hl-9"> </span><span class="hl-2">history</span><span class="hl-9">.</span><span class="hl-5">replace</span><span class="hl-9">(</span><span class="hl-3">"/contact"</span><span class="hl-9">)</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-8">onNext</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-9">() </span><span class="hl-4">=></span><span class="hl-9"> </span><span class="hl-2">history</span><span class="hl-9">.</span><span class="hl-5">replace</span><span class="hl-9">(</span><span class="hl-3">"/confirm"</span><span class="hl-9">)</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-6">/></span><br/><span class="hl-1"> </span><span class="hl-6"></</span><span class="hl-18">div</span><span class="hl-6">></span><br/><span class="hl-1"> ),</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-3">"confirm"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">isActive</span><span class="hl-2">:</span><span class="hl-1"> (</span><span class="hl-2">path</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-2">path</span><span class="hl-1"> === </span><span class="hl-3">"/confirm"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">element</span><span class="hl-2">:</span><span class="hl-1"> ({ </span><span class="hl-2">onSubmit</span><span class="hl-1">, </span><span class="hl-2">payload</span><span class="hl-1"> }) </span><span class="hl-4">=></span><span class="hl-1"> (</span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-18">div</span><span class="hl-6">></span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-18">p</span><span class="hl-6">></span><span class="hl-1">Step 3 — confirm and submit</span><span class="hl-6"></</span><span class="hl-18">p</span><span class="hl-6">></span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-7">WizardNavigation</span><br/><span class="hl-1"> </span><span class="hl-8">hasPrev</span><br/><span class="hl-1"> </span><span class="hl-8">hasNext</span><span class="hl-1">=</span><span class="hl-4">{false}</span><br/><span class="hl-1"> </span><span class="hl-8">onPrev</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-9">() </span><span class="hl-4">=></span><span class="hl-9"> </span><span class="hl-2">history</span><span class="hl-9">.</span><span class="hl-5">replace</span><span class="hl-9">(</span><span class="hl-3">"/review"</span><span class="hl-9">)</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-6">/></span><br/><span class="hl-1"> </span><span class="hl-6"></</span><span class="hl-18">div</span><span class="hl-6">></span><br/><span class="hl-1"> ),</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-0">export</span><span class="hl-1"> </span><span class="hl-0">default</span><span class="hl-1"> </span><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-5">SignupWizard</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> (</span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-7">WizardView</span><br/><span class="hl-1"> </span><span class="hl-8">steps</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">steps</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-8">routes</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">routes</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-8">history</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">history</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-8">pathname</span><span class="hl-1">=</span><span class="hl-3">"/contact"</span><br/><span class="hl-1"> </span><span class="hl-8">payload</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-9">{ </span><span class="hl-2">userId:</span><span class="hl-9"> </span><span class="hl-16">42</span><span class="hl-9"> }</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-6">/></span><br/><span class="hl-1"> );</span><br/><span class="hl-1">}</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <a id="core-props" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Core props<a href="#core-props" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong><code>steps</code></strong> — <code>IWizardStep<Payload>[]</code> (required)</p> |
| <p>Array of step descriptors that populate the stepper header. Each step maps to one or more routes via matching <code>id</code> values or the <code>isMatch</code> predicate. Steps with <code>passthrough: true</code> are excluded from the visual stepper but still participate in routing.</p> |
| <p><strong><code>routes</code></strong> — <code>IWizardOutlet<Data, Payload>[]</code> (required)</p> |
| <p>Array of outlet definitions. Each outlet specifies an <code>isActive</code> predicate that determines which outlet renders for a given pathname, plus an <code>element</code> factory function that renders the outlet's content.</p> |
| <p><strong><code>pathname</code></strong> — <code>string</code></p> |
| <p>The initial path used to determine which route and step are active. Defaults to <code>"/"</code>.</p> |
| <p><strong><code>history</code></strong> — <code>History</code></p> |
| <p>A <code>history</code> object (from the <code>history</code> package) used for internal navigation. When omitted, <code>WizardView</code> creates its own local history instance.</p> |
| <p><strong><code>payload</code></strong> — <code>Payload</code></p> |
| <p>Context object forwarded to every outlet's <code>element</code> props and to <code>IWizardStep.isVisible</code> predicates.</p> |
| <a id="iwizardstep-shape" class="tsd-anchor"></a><h2 class="tsd-anchor-link"><code>IWizardStep</code> shape<a href="#iwizardstep-shape" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong><code>id</code></strong> — <code>string</code></p> |
| <p>Identifier used to match this step against the active route's <code>id</code>. A step is highlighted when <code>route.id === step.id</code> or when <code>step.isMatch(route.id)</code> returns <code>true</code>.</p> |
| <p><strong><code>label</code></strong> — <code>string</code></p> |
| <p>Text label rendered inside the <code>StepLabel</code> in the stepper header.</p> |
| <p><strong><code>icon</code></strong> — <code>React.ComponentType<any></code></p> |
| <p>Custom step icon component passed to <code>StepLabel</code>'s <code>StepIconComponent</code> prop.</p> |
| <p><strong><code>isMatch</code></strong> — <code>(id: string) => boolean</code></p> |
| <p>Custom predicate for matching this step to a route ID. Use this when multiple routes should highlight the same step.</p> |
| <p><strong><code>isVisible</code></strong> — <code>(payload: Payload) => boolean</code></p> |
| <p>When provided, the step is filtered out of the stepper if this returns <code>false</code>. Called once on mount with the current <code>payload</code>.</p> |
| <p><strong><code>passthrough</code></strong> — <code>boolean</code></p> |
| <p>When <code>true</code>, the step is hidden from the stepper header (<code>display: none</code>) and the entire <code>WizardView</code> chrome (stepper + <code>PaperView</code> wrapper) is bypassed — only the active outlet renders. Use this for intermediate steps such as loading screens.</p> |
| <a id="iwizardoutlet-shape" class="tsd-anchor"></a><h2 class="tsd-anchor-link"><code>IWizardOutlet</code> shape<a href="#iwizardoutlet-shape" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong><code>id</code></strong> — <code>string</code> (required)</p> |
| <p>Identifier matched against step <code>id</code> values to determine which stepper item to highlight.</p> |
| <p><strong><code>isActive</code></strong> — <code>(path: string) => boolean</code> (required)</p> |
| <p>Predicate evaluated on every navigation event. The outlet whose <code>isActive</code> returns <code>true</code> for the current path is rendered in the content area.</p> |
| <p><strong><code>element</code></strong> — <code>(props: IWizardOutletProps<Data, Payload>) => React.ReactElement</code> (required)</p> |
| <p>Factory function that receives outlet props and returns the JSX to render. The props include <code>history</code>, <code>payload</code>, <code>onSubmit</code>, <code>data</code>, and the <code>OtherProps</code> context (<code>size</code>, <code>loading</code>, <code>setLoading</code>, <code>progress</code>, <code>setProgress</code>).</p> |
| <a id="outlet-context-otherprops" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Outlet context (<code>OtherProps</code>)<a href="#outlet-context-otherprops" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Every <code>element</code> function receives these additional props alongside the standard outlet props.</p> |
| <p><strong><code>size</code></strong> — <code>ISize</code></p> |
| <p>Current width and height of the <code>WizardView</code> content area in pixels. Useful for responsive layouts inside outlet components.</p> |
| <p><strong><code>loading</code></strong> — <code>boolean</code></p> |
| <p>Whether a load operation is in progress. <code>WizardView</code> shows a linear progress bar at the top of the stepper when this is <code>true</code>.</p> |
| <p><strong><code>setLoading</code></strong> — <code>(loading: boolean) => void</code></p> |
| <p>Call this from inside your outlet component to show or hide the loading progress indicator.</p> |
| <p><strong><code>progress</code></strong> — <code>number</code></p> |
| <p>Determinate progress value (0–100). When non-zero, <code>WizardView</code> switches the progress bar to determinate mode.</p> |
| <p><strong><code>setProgress</code></strong> — <code>(progress: number) => void</code></p> |
| <p>Set a specific progress percentage. Setting this also resets the loading counter to 0.</p> |
| <a id="callbacks" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Callbacks<a href="#callbacks" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong><code>onNavigate</code></strong> — <code>(update: Update) => void</code></p> |
| <p>Called on every history navigation event (<code>REPLACE</code> action) with the <code>history</code> <code>Update</code> object. Use this to synchronise the wizard's internal path with your application's global router.</p> |
| <p><strong><code>onLoadStart</code></strong> — <code>() => void</code></p> |
| <p>Called when an async operation within an outlet begins.</p> |
| <p><strong><code>onLoadEnd</code></strong> — <code>(isOk: boolean) => void</code></p> |
| <p>Called when an async operation completes. <code>isOk</code> is <code>false</code> on error.</p> |
| <a id="layout-flags" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Layout flags<a href="#layout-flags" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong><code>outlinePaper</code></strong> — <code>boolean</code></p> |
| <p>Renders the outer <code>PaperView</code> wrapper with a visible border outline instead of an elevation shadow.</p> |
| <p><strong><code>transparentPaper</code></strong> — <code>boolean</code></p> |
| <p>Renders the outer <code>PaperView</code> wrapper with a transparent background, including the stepper header.</p> |
| <p><strong><code>withScroll</code></strong> — <code>boolean</code></p> |
| <p>Enables vertical scrolling inside the content area. Useful when outlet content can exceed the wizard's height.</p> |
| <p><strong><code>fullScreen</code></strong> — <code>boolean</code></p> |
| <p>Passes the <code>fullScreen</code> flag through to the internal <code>OutletView</code>, enabling full-viewport rendering for modal-style wizards.</p> |
| <p><strong><code>sx</code></strong> — <code>SxProps</code></p> |
| <p>MUI <code>sx</code> prop applied to the root <code>PaperView</code> element.</p> |
| <p><strong><code>style</code></strong> — <code>React.CSSProperties</code></p> |
| <p>Inline styles applied to the root element.</p> |
| <p><strong><code>className</code></strong> — <code>string</code></p> |
| <p>CSS class applied to the root element.</p> |
| <hr> |
| <a id="wizardnavigation" class="tsd-anchor"></a><h2 class="tsd-anchor-link">WizardNavigation<a href="#wizardnavigation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><code>WizardNavigation</code> is a companion toolbar component you render inside outlet elements to give users previous and next buttons. It manages its own loading state to prevent double-clicks on async navigation handlers.</p> |
| <pre><code class="tsx"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">WizardNavigation</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"react-declarative"</span><span class="hl-1">;</span><br/><br/><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-5">ReviewStep</span><span class="hl-1">({ </span><span class="hl-2">history</span><span class="hl-1"> }) {</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> (</span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-18">div</span><span class="hl-6">></span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-18">p</span><span class="hl-6">></span><span class="hl-1">Review your details</span><span class="hl-6"></</span><span class="hl-18">p</span><span class="hl-6">></span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-7">WizardNavigation</span><br/><span class="hl-1"> </span><span class="hl-8">hasPrev</span><br/><span class="hl-1"> </span><span class="hl-8">hasNext</span><br/><span class="hl-1"> </span><span class="hl-8">labelPrev</span><span class="hl-1">=</span><span class="hl-3">"Back"</span><br/><span class="hl-1"> </span><span class="hl-8">labelNext</span><span class="hl-1">=</span><span class="hl-3">"Continue"</span><br/><span class="hl-1"> </span><span class="hl-8">onPrev</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-9">() </span><span class="hl-4">=></span><span class="hl-9"> </span><span class="hl-2">history</span><span class="hl-9">.</span><span class="hl-5">replace</span><span class="hl-9">(</span><span class="hl-3">"/contact"</span><span class="hl-9">)</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-8">onNext</span><span class="hl-1">=</span><span class="hl-4">{async</span><span class="hl-9"> () </span><span class="hl-4">=></span><span class="hl-9"> {</span><br/><span class="hl-9"> </span><span class="hl-0">await</span><span class="hl-9"> </span><span class="hl-5">saveToServer</span><span class="hl-9">();</span><br/><span class="hl-9"> </span><span class="hl-2">history</span><span class="hl-9">.</span><span class="hl-5">replace</span><span class="hl-9">(</span><span class="hl-3">"/confirm"</span><span class="hl-9">);</span><br/><span class="hl-9"> }</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-6">/></span><br/><span class="hl-1"> </span><span class="hl-6"></</span><span class="hl-18">div</span><span class="hl-6">></span><br/><span class="hl-1"> );</span><br/><span class="hl-1">}</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <p><strong><code>hasPrev</code></strong> — <code>boolean</code></p> |
| <p>When <code>true</code>, the Previous button is enabled. Defaults to <code>false</code>.</p> |
| <p><strong><code>hasNext</code></strong> — <code>boolean</code></p> |
| <p>When <code>true</code>, the Next button is enabled. Defaults to <code>false</code>.</p> |
| <p><strong><code>onPrev</code></strong> — <code>() => void | Promise<void></code></p> |
| <p>Called when the user clicks the Previous button. Can be async — the button disables automatically while the promise is pending.</p> |
| <p><strong><code>onNext</code></strong> — <code>() => void | Promise<void></code></p> |
| <p>Called when the user clicks the Next button. Can be async — both buttons disable while the promise is pending.</p> |
| <p><strong><code>labelPrev</code></strong> — <code>string</code></p> |
| <p>Label for the Previous button. Defaults to <code>"Prev"</code>.</p> |
| <p><strong><code>labelNext</code></strong> — <code>string</code></p> |
| <p>Label for the Next button. Defaults to <code>"Next"</code>.</p> |
| <p><strong><code>disabled</code></strong> — <code>boolean</code></p> |
| <p>When <code>true</code>, both buttons are disabled regardless of <code>hasPrev</code> and <code>hasNext</code>.</p> |
| <p><strong><code>fallback</code></strong> — <code>(e: Error) => void</code></p> |
| <p>Error handler invoked if <code>onPrev</code> or <code>onNext</code> rejects.</p> |
| <p><strong><code>AfterPrev</code></strong> — <code>React.ComponentType<any></code></p> |
| <p>Custom content rendered immediately after the Previous button.</p> |
| <p><strong><code>BeforeNext</code></strong> — <code>React.ComponentType<any></code></p> |
| <p>Custom content rendered immediately before the Next button.</p> |
| </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#wizardview-props-steps-routes-and-navigation"><span>Wizard<wbr/>View props: steps, routes, and navigation</span></a><ul><li><a href="#core-props"><span>Core props</span></a></li><li><a href="#iwizardstep-shape"><span>IWizard<wbr/>Step shape</span></a></li><li><a href="#iwizardoutlet-shape"><span>IWizard<wbr/>Outlet shape</span></a></li><li><a href="#outlet-context-otherprops"><span>Outlet context (<wbr/>Other<wbr/>Props)</span></a></li><li><a href="#callbacks"><span>Callbacks</span></a></li><li><a href="#layout-flags"><span>Layout flags</span></a></li><li><a href="#wizardnavigation"><span>Wizard<wbr/>Navigation</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">react-declarative</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html> |
|
|
