@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
43 lines (32 loc) • 2.98 kB
Markdown
# BaggageStepper
To implement BaggageStepper component into your project you'll need to add the import:
```jsx
import BaggageStepper from "@kiwicom/orbit-components/lib/BaggageStepper";
```
After adding import into your project you can use it simply like:
```jsx
<BaggageStepper />
```
## Props
Table below contains all types of the props available in BaggageStepper component.
| Name | Type | Default | Description |
| :------------- | :-------------------------- | :------ | :----------------------------------------------------------------------------------- |
| dataTest | `string` | | Optional prop for testing purposes. |
| id | `string` | | Set `id` for `BaggageStepper` |
| defaultValue | `number` | `0` | Specifies the value of the BaggageStepper. [See Functional specs](#functional-specs) |
| disabled | `boolean` | `false` | If `true`, the BaggageStepper will be disabled. |
| maxValue | `number` | `∞` | Specifies the maximum value for the BaggageStepper. |
| minValue | `number` | `-∞` | Specifies the minimum value for the BaggageStepper. |
| name | `string` | | The name for the BaggageStepper. |
| onBlur | `event => void \| Promise` | | Function for handling onBlur event. |
| onChange | `number => void \| Promise` | | Function for handling onClick event. |
| onFocus | `event => void \| Promise` | | Function for handling onFocus event. |
| step | `number` | `1` | Specifies the value of step to increment and decrement. |
| titleDecrement | `string \| (any => string)` | | Specifies `title` property on decrement `Button`. |
| titleIncrement | `string \| (any => string)` | | Specifies `title` property on increment `Button`. |
| selected | `boolean` | | If `true`, the BaggageStepper will have selected styles. |
## Functional specs
- The prop `defaultValue` sets the default value when the component mounts. If you need to get the current value of the BaggageStepper, use an arrow function.
```jsx
<BaggageStepper onChange={value => doSomething(value)} />
```