emg
A simple, enhanced react image component with loading spinner, fallback support and others.
Examples
see the examples
Features
- lazy loading
- loading indicator
- error handler and fallback placeholder
Installing
Using command line:
$ yarn add emg# or $ npm i -S emg
Using cdn:
Usage
; Component public { return <Img src="url/for/image"/> }
Options
- className: class name
- type:
string
- type:
- src: url of the image to load
- type:
string
- type:
- alt: alt for the image
- type:
string
- type:
- title: title attribute for the image
- type:
string
- type:
- style: inline style for the image
- type:
React.CSSProperties
- type:
- loadingImg: show while image loading
- type:
string
- type:
- loadErrImg: show when failed to load the image
- type:
string
- type:
- fallbackImg: instead of showing an error image, show this fallback one
- type:
string
- type:
- isLazyLoad: whether lazy load or not. enable only when
IntersectionObserver
is supported- type:
boolean
- default:
false
- type:
- onLoad:
onload
handler- type:
(event: Event) => void
- type:
- onError:
onerror
handler- type:
(event: Event) => void
- type:
Development
For development, clone this repo then
$ yarn install && yarn start
this will start a local server then open browser and go to http://localhost:3000
to see examples in action.
available scripts:
build
: generate budnles that are ready to publishdev
: start local server for local developmentlint
: run tslint & stylelint
TODO
- add test, unit and e2e
- dont bail on warning
Acknowledgement
Lazy load
Lazy load using the modern IntersectionObserver
api.
For more info you can read Lazy Loading Images and Video from WebFundamentals.