Wizard
A Wizard component allows a user to navigate.
| Install | yarn add @diallink-corp/convergo-react-wizard |
|---|---|
| Version | 4.1.2 |
| Usage | import {Wizard} from '@diallink-corp/convergo-react-wizard' |
Routes
function Example() {
function ExampleWizard() {
const navigate = useNavigate();
const location = useLocation();
const query = useQuery(location.search);
const steps = [
{ key: 'welcome', title: 'Welcome' },
{ key: 'verify', title: 'Verify Email' },
{ key: 'contacts', title: 'Contacts' },
{ key: 'plan', title: 'Select Plan' }
];
return (
<Wizard
keys={steps.map(({ key }) => key)}
defaultSelectedKey={query.get('step-key')}
disabledKeys={['contacts']}
size="large"
>
{({ goBack, goNext, selectedKey }) => (
<>
<Header>
<StepList
items={steps}
onSelectionChange={(newKey) =>
navigate(`?step-key=`, {
state: {
...location.state,
[newKey]: steps.find(({ key, title }) => key === newKey)
}
})}
>
{({ key, title }) => <Item key={key}>{title}</Item>}
</StepList>
</Header>
<Switcher case={selectedKey}>
<div key="welcome">
{location.state && location.state['welcome']?.title}
</div>
<div key="verify">
{location.state && location.state['verify']?.title}
</div>
<div key="contacts">
{location.state && location.state['contacts']?.title}
</div>
<div key="plan">
{location.state && location.state['plan']?.title}
</div>
</Switcher>
<Footer>
<ButtonGroup>
<Button variant="text">Cancel</Button>
<Button
variant="text"
iconName="PlusIcon"
iconVariant="outline"
>
Save Draft
</Button>
</ButtonGroup>
<ButtonGroup>
<Button
variant="text"
iconName="ChevronLeftIcon"
iconVariant="outline"
onPress={goBack}
>
Back
</Button>
<Button
iconName="ChevronRightIcon"
iconVariant="outline"
iconAlignment="end"
onPress={goNext}
>
Next
</Button>
</ButtonGroup>
</Footer>
</>
)}
</Wizard>
);
}
return (
<BrowserRouter>
<Routes>
<Route path="*" element={<ExampleWizard />} />
</Routes>
</BrowserRouter>
);
}
function Example() {
function ExampleWizard() {
const navigate = useNavigate();
const location = useLocation();
const query = useQuery(location.search);
const steps = [
{ key: 'welcome', title: 'Welcome' },
{ key: 'verify', title: 'Verify Email' },
{ key: 'contacts', title: 'Contacts' },
{ key: 'plan', title: 'Select Plan' }
];
return (
<Wizard
keys={steps.map(({ key }) => key)}
defaultSelectedKey={query.get('step-key')}
disabledKeys={['contacts']}
size="large"
>
{({ goBack, goNext, selectedKey }) => (
<>
<Header>
<StepList
items={steps}
onSelectionChange={(newKey) =>
navigate(`?step-key=`, {
state: {
...location.state,
[newKey]: steps.find((
{ key, title }
) => key === newKey)
}
})}
>
{({ key, title }) => (
<Item key={key}>{title}</Item>
)}
</StepList>
</Header>
<Switcher case={selectedKey}>
<div key="welcome">
{location.state &&
location.state['welcome']?.title}
</div>
<div key="verify">
{location.state &&
location.state['verify']?.title}
</div>
<div key="contacts">
{location.state &&
location.state['contacts']?.title}
</div>
<div key="plan">
{location.state &&
location.state['plan']?.title}
</div>
</Switcher>
<Footer>
<ButtonGroup>
<Button variant="text">Cancel</Button>
<Button
variant="text"
iconName="PlusIcon"
iconVariant="outline"
>
Save Draft
</Button>
</ButtonGroup>
<ButtonGroup>
<Button
variant="text"
iconName="ChevronLeftIcon"
iconVariant="outline"
onPress={goBack}
>
Back
</Button>
<Button
iconName="ChevronRightIcon"
iconVariant="outline"
iconAlignment="end"
onPress={goNext}
>
Next
</Button>
</ButtonGroup>
</Footer>
</>
)}
</Wizard>
);
}
return (
<BrowserRouter>
<Routes>
<Route path="*" element={<ExampleWizard />} />
</Routes>
</BrowserRouter>
);
}
function Example() {
function ExampleWizard() {
const navigate =
useNavigate();
const location =
useLocation();
const query =
useQuery(
location.search
);
const steps = [
{
key: 'welcome',
title: 'Welcome'
},
{
key: 'verify',
title:
'Verify Email'
},
{
key: 'contacts',
title: 'Contacts'
},
{
key: 'plan',
title:
'Select Plan'
}
];
return (
<Wizard
keys={steps.map((
{ key }
) => key)}
defaultSelectedKey={query
.get(
'step-key'
)}
disabledKeys={[
'contacts'
]}
size="large"
>
{(
{
goBack,
goNext,
selectedKey
}
) => (
<>
<Header>
<StepList
items={steps}
onSelectionChange={(
newKey
) =>
navigate(
`?step-key=`,
{
state:
{
...location
.state,
[newKey]:
steps
.find(
(
{
key,
title
}
) =>
key ===
newKey
)
}
}
)}
>
{(
{
key,
title
}
) => (
<Item
key={key}
>
{title}
</Item>
)}
</StepList>
</Header>
<Switcher
case={selectedKey}
>
<div key="welcome">
{location
.state &&
location
.state[
'welcome'
]?.title}
</div>
<div key="verify">
{location
.state &&
location
.state[
'verify'
]?.title}
</div>
<div key="contacts">
{location
.state &&
location
.state[
'contacts'
]?.title}
</div>
<div key="plan">
{location
.state &&
location
.state[
'plan'
]?.title}
</div>
</Switcher>
<Footer>
<ButtonGroup>
<Button variant="text">
Cancel
</Button>
<Button
variant="text"
iconName="PlusIcon"
iconVariant="outline"
>
Save
Draft
</Button>
</ButtonGroup>
<ButtonGroup>
<Button
variant="text"
iconName="ChevronLeftIcon"
iconVariant="outline"
onPress={goBack}
>
Back
</Button>
<Button
iconName="ChevronRightIcon"
iconVariant="outline"
iconAlignment="end"
onPress={goNext}
>
Next
</Button>
</ButtonGroup>
</Footer>
</>
)}
</Wizard>
);
}
return (
<BrowserRouter>
<Routes>
<Route
path="*"
element={
<ExampleWizard />
}
/>
</Routes>
</BrowserRouter>
);
}
Tips
Behavior
Make it clear how to progress
Wizards offer options for going back to completed steps. But the wizard itself has no option for moving forward.
Make it clear in the rest of the screen how users can continue in the task. Use primary buttons to draw attention to the main action to get them to the next step.
Content
Keep progress even
Manage user expectations by keeping it clear what’s been done and what’s left to do. Reduce anxiety by showing their progress and continuing forward smoothly.
Break the process into approximately equal steps so that each step advances the user about the same amount toward the end.
Accessibility
In order to support internationalization, provide a localized string to the label or aria-label prop.