@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.
56 lines (40 loc) • 3.17 kB
Markdown
# PricingTable
To implement PricingTable component into your project you'll need to the import at least the PricingTable and the [PricingTableItem](#pricingTableItem):
```jsx
import PricingTable, { PricingTableItem } from "@kiwicom/orbit-components/lib/PricingTable";
```
After adding import into your project you can use it simply like:
```jsx
<PricingTable>
<PricingTableItem>content</PricingTableItem>
<PricingTableItem>content</PricingTableItem>
</PricingTable>
```
## Props
Table below contains all types of the props available in the PricingTable component.
| Name | Type | Default | Description |
| :------------------- | :----------- | :------ | :------------------------------------------------------------------- |
| children | `React.Node` | | The content of the PricingTable. [See Subcomponents](#subcomponents) |
| dataTest | `string` | | Optional prop for testing purposes. |
| defaultActiveElement | `number` | `0` | Sets default active element on mobile view |
---
## Subcomponents
PricingTable component needs to be used with it's subcomponent PricingTableItem
### PricingTableItem
```jsx
import PricingTable, { PricingTableItem } from "@kiwicom/orbit-components/lib/PricingTable";
```
#### Props
Table below contains all types of the props in the PricingTableItem component.
| Name | Type | Default | Description |
| :---------------- | :---------------------- | :------ | :----------------------------------------------------------------------------- |
| action | `React$Node` | | Area for action elements, like Button. |
| badge | `string \| React$Node` | | Badge above the PricingTableItem, [works with Orbit Badge](../Badge/README.md) |
| **children** | `React.Node` | | Content of the PricingTableItem component. |
| dataTest | `string` | | Optional prop for testing purposes. |
| featureIcon | `React$Node` | | Feature Icon displayed at top of the PricingTableItem |
| mobileDescription | `Translation` | | Description of PricingTableItem, displayed on mobile |
| name | `Translation` | | Name of PricingTableItem |
| onClick | `() => void \| Promise` | | Function for handling the onClick event. |
| price | `Translation` | | Price of item |
| priceBadge | `React$Node` | | Badge instead of `price`, [works with Orbit Badge](../Badge/README.md) |