# Stepper

To implement Stepper component into your project you'll need to add the import:

```jsx
import { Stepper } from '@kiwicom/orbit-react-native';
```

After adding import into your project you can use it simply like:

```jsx
<Stepper />
```

## Props

Table below contains all types of the props available in Stepper component.

| Name     | Type                        | Default | Description                                                                                                    |
| :------- | :-------------------------- | :------ | :------------------------------------------------------------------------------------------------------------- |
| testID   | `string`                    |         | Optional prop for testing purposes. (This disables the 'layout-only view removal' optimization for this view!) |
| value    | `number`                    |         | Specifies the value of the Stepper.                                                                            |
| onChange | `number => void \| Promise` |         | Function for handling onClick event.                                                                           |
| disabled | `boolean`                   | `false` | If `true`, the Stepper will be disabled.                                                                       |
| maxValue | `number`                    | `∞`     | Specifies the maximum value for the Stepper.                                                                   |
| minValue | `number`                    | `-∞`    | Specifies the minimum value for the Stepper.                                                                   |
| name     | `string`                    |         | The name for the Stepper.                                                                                      |

# StepperStateless

InputStepper offers a stateless version for your custom solutions. To use `StepperStateless` you'll need to add the import

```jsx
import { StepperStateless } from '@kiwicom/orbit-react-native';
```

## Props

Table below contains all types of the props available in `StepperStateless` component.

| Name              | Type                         | Default | Description                                                                                                    |
| :---------------- | :--------------------------- | :------ | :------------------------------------------------------------------------------------------------------------- |
| testID            | `string`                     |         | Optional prop for testing purposes. (This disables the 'layout-only view removal' optimization for this view!) |
| value             | `number`                     |         | Specifies the value of the Stepper.                                                                            |
| disabled          | `boolean`                    | `false` | If `true`, the Stepper will be disabled.                                                                       |
| disabledIncrement | `boolean`                    |         | If `true`, the increment `Button` will be disabled.                                                            |
| disabledDecrement | `boolean`                    |         | If `true`, the decrement `Button` will be disabled.                                                            |
| maxValue          | `number`                     | `∞`     | Specifies the maximum value for the Stepper.                                                                   |
| minValue          | `number`                     | `-∞`    | Specifies the minimum value for the Stepper.                                                                   |
| onDecrement       | `(event) => void \| Promise` |         | Function for handling decrement event.l                                                                        |
| onIncrement       | `(event) => void \| Promise` |         | Function for handling increment event.                                                                         |

### Usage:

```jsx
<StepperStateless value={'2 adults'} />
```

## Helper functions

We provide you with helpers function for validation they can be imported like this:

```jsx
import { validateIncrement } from '@kiwicom/orbit-react-native';
import { validateDecrement } from '@kiwicom/orbit-react-native';
```

### ValidateIncrement

Helper function for validating increment. Can be used with Stateless Stepper to make custom validation easier.

#### Arguments

| Name     | Type     | Default | Description                                                |
| :------- | :------- | :------ | :--------------------------------------------------------- |
| value    | `number` |         | Specifies the the current value.                           |
| maxValue | `number` | `∞`     | Specifies the maximum value for the InputStepperStateless. |
| step     | `number` | `1`     | Specifies the value of step to increment and decrement.    |

#### Usage

```js
validateIncrement({ value, maxValue, step });
```

### ValidateDecrement

Helper function for validating decrement. Can be used with Stateless Stepper to make custom validation easier.

#### Arguments

| Name     | Type     | Default | Description                                                |
| :------- | :------- | :------ | :--------------------------------------------------------- |
| value    | `number` |         | Specifies the the current value.                           |
| minValue | `number` | `-∞`    | Specifies the minimum value for the InputStepperStateless. |
| step     | `number` | `1`     | Specifies the value of step to increment and decrement.    |

#### Usage

```js
validateDecrement({ value, minValue, step });
```