@fenderdigital/react-image

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 (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 for development documentation.