https://github.com/wayou/emg
a simple, enhanced react image component with loading spinner, fallback support and other features
https://github.com/wayou/emg
component fallback image lazy-load-img react sass typescript ui
Last synced: 3 months ago
JSON representation
a simple, enhanced react image component with loading spinner, fallback support and other features
- Host: GitHub
- URL: https://github.com/wayou/emg
- Owner: wayou
- License: mit
- Created: 2018-09-04T15:52:38.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-01T08:24:37.000Z (over 6 years ago)
- Last Synced: 2025-01-23T04:18:48.138Z (5 months ago)
- Topics: component, fallback, image, lazy-load-img, react, sass, typescript, ui
- Language: JavaScript
- Homepage: https://wayou.github.io/emg/index.html
- Size: 1.74 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
emg
===
[](https://circleci.com/gh/wayou/emg)
[](./LICENSE)
[](https://www.npmjs.com/package/emg)
[](https://www.npmjs.com/package/emg)
A simple, enhanced react image component with loading spinner, fallback support and other features
### Features
- lazy loading
- loading indicator
- error handler and fallback placeholder
### Installing
Using command line:
```bash
$ yarn add emg
# or
$ npm i -S emg
```
Using CDN:
```html
```
### Usage
```js
import Emg from 'emg';
class Example extends React.Component{
public render(){
return
}
}
```
### Options
- `className`: class name
- type: `string`
- `src`: url of the image to load
- type: `string`
- `alt`: alt for the image
- type: `string`
- `title`: title attribute for the image
- type: `string`
- `style`: inline style for the image
- type: `React.CSSProperties`
- `loadingImg`: show while image loading
- type: `string`
- `loadErrImg`: show when failed to load the image
- type: `string`
- `fallbackImg`: instead of showing an error image, show this fallback one
- type: `string`
- `isLazyLoad`: whether lazy load or not. enable only when `IntersectionObserver` is supported
- type: `boolean`
- default: `false`
- `onLoad`: `onload` handler
- type: `(event: Event) => void`
- `onError`: `onerror` handler
- type: `(event: Event) => void`
### Examples
See the [examples](https://wayou.github.io/emg/index.html).
#### Run the examples
clone this repo then:
```bash
$ yarn install && yarn start
```
navigate to http://localhost:3000
### Development
For development, clone this repo then
```bash
$ 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 publish
- `dev`: start local server for local development
- `lint`: run tslint & stylelint
- `test`: test the component
### Acknowledgement
#### Lazy load
Lazy load using the modern [`IntersectionObserver`](https://developers.google.com/web/updates/2016/04/intersectionobserver) api.
For more info you can read [
Lazy Loading Images and Video](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/#lazy_loading_images) from WebFundamentals.