react-wizard-flow
v1.0.2
Published
react-wizard-flow
Downloads
5
Readme
react-wizard-flow
Usage
import { createWizardFlow, useWizardFlow } from 'react-wizard-flow';
enum TestSteps {
step1,
step2,
}
const WizardFlow = createWizardFlow(TestSteps);
function Step1() {
const { transition, close } = useWizardFlow(WizardFlow);
return (
<div>
<header>Step 1</header>
<button onClick={() => transition(TestSteps.step1)}>To Step 1</button>
<button onClick={() => transition(TestSteps.step2)}>To Step 2</button>
<button onClick={close}>Close</button>
</div>
);
}
function Step2() {
const { transition, close } = useWizardFlow(WizardFlow);
return (
<div>
<header>Step 1</header>
<button onClick={() => transition(TestSteps.step1)}>To Step 1</button>
<button onClick={() => transition(TestSteps.step2)}>To Step 2</button>
<button onClick={close}>Close</button>
</div>
);
}
const STEPS = {
[TestSteps.step1]: <Step1 />,
[TestSteps.step2]: <Step2 />,
};
export default function() {
const onClose = () => { console.log('Flow closed'); }
return <WizardFlow.Provider initialStep={TestSteps.step1} steps={STEPS} onClose={onClose} />
}
This README was generated by anansi.