@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.
41 lines (31 loc) • 3.17 kB
Markdown
# Loading
To implement Loading component into your project you'll need to add the import:
```jsx
import Loading from "@kiwicom/orbit-components/lib/Loading";
```
After adding import into your project you can use it simply like:
```jsx
<Loading title="Loading" />
```
## Props
Table below contains all types of the props available in the Loading component.
| Name | Type | Default | Description |
| :---------- | :------------------------ | :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| children | `React.Node` | | The content that is shown when `loading` is **not** `true`. |
| dataTest | `string` | | Optional prop for testing purposes. |
| id | `string` | | Set `id` for `Loading`. |
| loading | `boolean` | `false` | If `true`, the Loading will be displayed. Loading which doesn't have children is always shown, even if `loading` prop is set to `false`. |
| type | [`enum`](#enum) | `"pageLoader"` | The type of the Loading. |
| customSize | `number` | | Allows you to define custom size for circle loader. |
| asComponent | `string \| React.Element` | `"div"` | The component used for the root node. |
| text | `Translation` | | Text to be displayed below the loader image. Cannot be used with `title` or `ariaHidden`. See Accessibility tab. |
| title | `string` | | Provides an accessible name for the loading indicator that is announced by screen readers. Cannot be used with `text` or `ariaHidden`. See Accessibility tab. |
| ariaHidden | `boolean` | | If `true`, hides the loading indicator from screen readers. Cannot be used with `text` or `title`. See Accessibility tab. |
### enum
| type |
| :--------------- |
| `"buttonLoader"` |
| `"searchLoader"` |
| `"boxLoader"` |
| `"pageLoader"` |
| `"inlineLoader"` |