redux-form wizard with ant.design or antd Steps - wizard

Question

I want to use redux-form with antd normal components can be handled via renderField component but I want to use antd Steps https://ant.design/components/steps/ with redux-form. How to implement this? Can someone guide me?

Answer 1

Here is where i started from:
Redux-form wizard form
Antd steps
and here is my redux-form with antd steps combined.
The <Form /> is inside the modal. Steps are stored in redux store. In my case steps are controlled by saga (if response success > increment to step 3, if requires additional verification > increment to step 2 etc...) but you can increment/set steps by clicking next/submit or decrement/reset steps by clicking on previous/close modal.
const Form = ({ hide, isLoading, step, name, setStep }) => (
<FormCard>
{step === 1 && <StepOneText name={name} />}
{step === 2 && <StepTwoText name={name} />}
{step === 3 && <StepThreeText name={name} hide={hide} />}
<Steps
initial={1}
size="small"
current={step}
style={{ padding: '20px 0' }}
>
<Step
status={stepStatus(step)}
title="Auth"
icon={<Icon type={step === 1 && isLoading ? 'loading' : 'user'} />}
/>
<Step
title="Verify"
icon={<Icon type={step === 2 && isLoading ? 'loading' : 'solution'} />}
/>
<Step
status={step === 3 ? 'finish' : 'wait'}
title="Done"
icon={<Icon type="smile-o" />}
/>
</Steps>
{step === 1 && <RegisterForm />}
{step === 2 && <ChallengeForm />}
{step === 3 && <CallForAction hide={hide} setStep={setStep} />}
</FormCard>
);