react_promenade_multi_step_stepper_quickstart.ts

1import React from 'react';
2import { Promenade, Step } from 'react-promenade';
3
4const QuickStartStepper: React.FC = () => {
5  return (
6    <Promenade>
7      <Step>
8        {({ nextStep }) => (
9          <div>
10            <h1>Step 1</h1>
11            <button onClick={nextStep}>Next</button>
12          </div>
13        )}
14      </Step>
15      <Step>
16        {({ nextStep, prevStep }) => (
17          <div>
18            <h1>Step 2</h1>
19            <button onClick={prevStep}>Back</button>
20            <button onClick={nextStep}>Next</button>
21          </div>
22        )}
23      </Step>
24      <Step>
25        {({ prevStep }) => (
26          <div>
27            <h1>Step 3 (Final)</h1>
28            <button onClick={prevStep}>Back</button>
29            <p>Finished!</p>
30          </div>
31        )}
32      </Step>
33    </Promenade>
34  );
35};
36
37export default QuickStartStepper;