# Image for Fender React UI Kit

### Description
Progressive image loader

### Installation and Usage
```
yarn add @fenderdigital/react-image --save
```

```js
import Image from '@fenderdigital/react-image';
```

### Props
* `alt` - Descriptive string of the image contents for accessibility
* `bgColor` - Tachyon class (without `bg-` prefix) for image container background color
* `images` - Array of image URLs
* `intersectionOptions` - Object containing propters for the intersection observer 
* `onLoaded` - Callback to run after the higher fidelity image has loaded
* `ratio` - Aspect ratio of the image
* `tiny` - URL of a small version of the image
* `transition` - CSS animation transition type

| propName            | propType   | defaultValue                                      | isRequired |
| ------------------- | ---------- | ------------------------------------------------- | ---------- |
| alt                 | string     | ''                                                | false      |
| bgColor             | string     | 'near-white'                                      | false      |
| images              | array      | []                                                | false      |
| intersectionOptions | object     | { root: null, rootMargin: '0px', threshold: 0.5 } | false      |
| onLoaded            | function   | () => {}                                          | false      |
| ratio               | number     | 9 / 16                                            | false      |
| tiny                | string     | null                                              | false      |
| transition          | string     | null                                              | false      |


### Development

Check the [Monorepo README](https://github.com/fenderdigital/react-ui-kit) for development documentation.