Image for Fender React UI Kit
Description
Progressive image loader
Installation and Usage
yarn add @fenderdigital/react-image --save
import Image from '@fenderdigital/react-image';Props
-
alt- Descriptive string of the image contents for accessibility -
bgColor- Tachyon class (withoutbg-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 for development documentation.