@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.
80 lines (61 loc) • 4.52 kB
Markdown
# PictureCard
To implement PictureCard component into your project you'll need to add the import:
```jsx
import PictureCard from "@kiwicom/orbit-components/lib/PictureCard";
```
After adding import into your project you can use it simply like:
```jsx
<PictureCard
image={{
original: "385x320",
code: "dubai_ae",
name: "Dubai Arab Emirates",
placeholder: "385x320",
}}
subTitle="Prague"
title="Dubai"
/>
```
## Props
Table below contains all types of the props available in PictureCard component.
| Name | Type | Default | Description |
| :-------- | :---------------------------------------------- | :------ | :---------------------------------------------------------------- |
| dataTest | `string` | | Optional prop for testing purposes. |
| title | `string` | | The title of PictureCard |
| subTitle | `string` | | The subTitle of PictureCard |
| label | `string` | | The label of PictureCard |
| children | `React.Node` | | The content of PictureCard |
| actions | `React.Node` | | Actions - especially Buttons that will be rendered on the bottom. |
| height | `string` | `"300"` | The height of PictureCard. |
| width | `string` | | The width of PictureCard. |
| href | `string` | | The link of PictureCard. |
| external | `boolean` | `false` | If `true`, PictureCard opens link in a new tab |
| **image** | [`Image`](#Image) [`ImageCustom`](#ImageCustom) | | Image of PictureCard [See Functional specs](#functional-specs) |
| onClick | `onClick` | | Function for handling onClick event. |
| tabIndex | `string \| number` | `"0"` | Specifies the tab order of an element |
### Image
Table below contains all types of the props available for object in Image
| Name | Type | Description |
| :---------- | :------- | :----------------------------------------------------------------------- |
| original | `string` | The size of image |
| name | `string` | The name of image, defines alt prop for image |
| **code** | `string` | The code of image, defines which image will be rendered. |
| placeholder | `string` | The preferred placeholder size [See Functional specs](#functional-specs) |
### ImageCustom
Table below contains all types of the props available for object in Image
| Name | Type | Description |
| :--- | :------- | :------------------------------------------------------------------ |
| name | `string` | The name of image, defines alt prop for image |
| src | `string` | The location of an image if you want it to be from your own source. |
## Functional specs
- You don't have to pass entire src of the image. Just `dubai_ae`, `paris_fr` etc. is enough.
- `OnClick` is also called on `Enter` and `Space` keypresses.
- For usage with server-side rendering (SSR), a placeholder can be emitted for it to work correctly. This is a React issue see more on this https://github.com/facebook/react/issues/15446 and https://github.com/zeit/next.js/issues/7047.
Lastly if you are using Next.js you can do this workaround with dynamic import set to SSR false. https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr
```
const PictureCard = dynamic({
loader: () => import('PictureCard'),
loading: () => <Placeholder />,
ssr: false,
});
```