2
2
3
3
> Simple, no frills, component for fading in images. Just pass it a src prop.
4
4
5
- [ ![ NPM] ( https://img.shields.io/npm/v/react-image-fade-in.svg )] ( https://www.npmjs.com/package/react-image-fade-in ) [ ![ JavaScript Style Guide] ( https://img.shields.io/badge/code_style-standard-brightgreen.svg )] ( https://standardjs.com )
5
+ [ ![ NPM] ( https://img.shields.io/npm/v/react-image-fade-in.svg )] ( https://www.npmjs.com/package/react-image-fade-in ) [ ![ JavaScript Style Guide] ( https://img.shields.io/badge/code_style-standard-brightgreen.svg )] ( https://standardjs.com ) <a href =" https://github.com/patricktran/react-image-fade-in " target =" \_parent " >
6
+ <img alt =" " src =" https://img.shields.io/github/stars/patricktran/react-image-fade-in.svg?style=social&label=Star " />
7
+ </a >
6
8
7
9
## Install
8
10
@@ -15,15 +17,13 @@ npm install --save react-image-fade-in
15
17
## Usage
16
18
17
19
``` jsx
18
- import React , { Component } from ' react'
20
+ import React , { Component } from " react" ;
19
21
20
- import ImageFadeIn from ' react-image-fade-in'
22
+ import ImageFadeIn from " react-image-fade-in" ;
21
23
22
24
class Example extends Component {
23
- render () {
24
- return (
25
- < ImageFadeIn width= {640 } height= {480 } src= {imageSrc} / >
26
- )
25
+ render () {
26
+ return < ImageFadeIn width= {640 } height= {480 } src= {imageSrc} / > ;
27
27
}
28
28
}
29
29
```
@@ -32,14 +32,14 @@ class Example extends Component {
32
32
33
33
This a list of props that you can pass down to the component:
34
34
35
- | Property | Description | Default value | Type | Required |
36
- | -------- | ----------- | ------------- | ---- | -------- |
37
- | ` src ` | image source url | | string | yes
38
- | ` loadAsBackgroundImage ` | if false, renders as an IMG tag. If true, renders a DIV with image as the background-image (style css) | false | bool |
39
- | ` opacityTransition ` | Duration of the fade in, in seconds (s) | 0.5s | number |
40
- | ` onClick ` | onClick handler | | function |
41
- | ` HTML Global Attributes ` | add your own attributes (style, className, id, etc.) |
42
- | ` HTML Event Attributes ` | add your own events (onBlur, onFocus, onMouseDown, etc.) |
35
+ | Property | Description | Default value | Type | Required |
36
+ | ------------------------ | ------------------------------------------------------------------------------------------------------ | ------------- | ---- ---- | -------- |
37
+ | ` src ` | image source url | | string | yes |
38
+ | ` loadAsBackgroundImage ` | if false, renders as an IMG tag. If true, renders a DIV with image as the background-image (style css) | false | bool |
39
+ | ` opacityTransition ` | Duration of the fade in, in seconds (s) | 0.5s | number |
40
+ | ` onClick ` | onClick handler | | function |
41
+ | ` HTML Global Attributes ` | add your own attributes (style, className, id, etc.) |
42
+ | ` HTML Event Attributes ` | add your own events (onBlur, onFocus, onMouseDown, etc.) |
43
43
44
44
## License
45
45
0 commit comments