npm install --save react-formik-step
# or
yarn add react-formik-step
import React from "react";
import { StepForm, Step } from "react-formik-step";
import * as Yup from "yup";
import Layout from "./Layout";
import { StepOne, StepTwo } from "./Steps";
const App = () => {
const onSubmit = values => {
console.log(values);
};
return (
<StepForm
initialValues={{
firstName: "",
lastName: "",
age: 18,
address: ""
}}
onSubmit={onSubmit}
>
<Step
title="step 1"
validationSchema={Yup.object().shape({
firstName: Yup.string()
.min(2, "At least 2 char")
.required("Required"),
lastName: Yup.string()
.min(2, "At least 2 char")
.required("Required")
})}
>
<Layout>
<StepOne />
</Layout>
</Step>
<Step
title="step 2"
validationSchema={Yup.object().shape({
age: Yup.number()
.min(16, "Must be older than 16")
.required("Required")
})}
>
<Layout>
<StepTwo />
</Layout>
</Step>
</StepForm>
);
};
StepForm
is just a wrapper around Formik
and interit all Formik Props
Children of StepForm
must only be Step
components
Example:
<StepForm
initialValues={{
firstName: "",
lastName: "",
age: 18,
address: ""
}}
onSubmit={onSubmit}
>
<Step />
<Step />
<Step />
...
</StepForm>
Represent a single step in multi step form
Example:
<Step
title="Step 1"
validationSchema={Yup.object().shape({
firstName: Yup.string()
.min(2, "At least 2 char")
.required("Required")
})}
/>
Title for this step. Will be included in StepState
Useful for Form's index
Ref to Formik validationSchema
Serve the purpose of validate fields in current step
Ref to Formik validate
Serve the purpose of validate fields in current step
Custom React Hook to access StepForm state
Can only be used to child components of StepForm
Example:
import React from "react";
import { Steps } from "antd";
import { useStepContext } from "react-formik-step";
const FormIndex = () => {
const { currentStepIndex, steps } = useStepContext();
return (
<Steps current={currentStepIndex}>
{steps.map((s, i) => (
<Steps.Step key={i} title={s.title} />
))}
</Steps>
);
};
export default FormIndex;
export interface StepState {
steps: Array<StepProps>;
currentStepIndex: number;
gotoStep: (step: number) => void;
}
List of steps compiled from Step
Zero-counting index of current active step
Jump to the specifed step
index. Input value will always be normalized in range [0, steps.lenght-1]
MIT © vanhtuan0409@gmail.com