# react-formik-step

> >

Latest version **0.1.0** (published 2020-03-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-formik-step
pnpm add react-formik-step
yarn add react-formik-step
bun add react-formik-step
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2020-03-26 |
| First published | 2020-03-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 44.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | vanhtuan0409@gmail.com |
| Maintainers | vanhtuan0409 |

## Links

- npm: https://www.npmjs.com/package/react-formik-step
- Repository: https://github.com/vanhtuan0409/react-formik-step
- Homepage: https://github.com/vanhtuan0409/react-formik-step#readme
- Issues: https://github.com/vanhtuan0409/react-formik-step/issues
- npm.io page: https://npm.io/package/react-formik-step

## Recent versions

- 0.1.0 (latest) — 2020-03-26

## README

# react-formik-step

>

[![NPM](https://img.shields.io/npm/v/react-formik-step.svg)](https://www.npmjs.com/package/react-formik-step) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-formik-step
# or
yarn add react-formik-step
```

## Usage

```tsx
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>
  );
};
```

## Reference

### StepForm

`StepForm` is just a wrapper around `Formik` and interit all [Formik Props](https://github.com/jaredpalmer/formik/blob/master/docs/api/formik.md#props-1)


#### `children: Array<Step>`

Children of `StepForm` must only be `Step` components

Example:

```tsx
<StepForm
  initialValues={{
    firstName: "",
    lastName: "",
    age: 18,
    address: ""
  }}
  onSubmit={onSubmit}
>
  <Step />
  <Step />
  <Step />
  ...
</StepForm>

```

---

### Step

Represent a single step in multi step form

Example:

```tsx
<Step
  title="Step 1"
  validationSchema={Yup.object().shape({
    firstName: Yup.string()
      .min(2, "At least 2 char")
      .required("Required")
  })}
/>
```

#### `title: string`

Title for this step. Will be included in StepState

Useful for Form's index

#### `validationSchema?: any`

Ref to [Formik validationSchema](https://github.com/jaredpalmer/formik/blob/master/docs/api/formik.md#validationschema-schema----schema)

Serve the purpose of validate fields in current step

#### `validate?: (values: T) => void | object | Promise<FormikErrors<T>>`

Ref to [Formik validate](https://github.com/jaredpalmer/formik/blob/master/docs/api/formik.md#validate-values-values--formikerrorsvalues--promiseany)

Serve the purpose of validate fields in current step

---

### useStepContext: () => StepState

Custom React Hook to access StepForm state

Can only be used to child components of `StepForm`

Example:

```tsx
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;
```

---

### StepState

```tsx
export interface StepState {
  steps: Array<StepProps>;
  currentStepIndex: number;
  gotoStep: (step: number) => void;
}
```

#### `steps: Array<StepProps>`

List of steps compiled from `Step`

#### `currentStepIndex: number`

*Zero-counting* index of current active step

#### `gotoStep: (step: number) => void`

Jump to the specifed `step` index. Input value will always be normalized in range `[0, steps.lenght-1]`

---

## License

MIT © [vanhtuan0409@gmail.com](https://github.com/vanhtuan0409@gmail.com)

---
_Source: https://npm.io/package/react-formik-step · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._