react-image-appear
Wraps an img within a placeholder element and adds a gif loader in between. No more ugly-looking progressively loading images!
This project has also been ported to AngularJS 1.x - ng-image-appear.
Installation
via npm
via yarn
Usage
Import the component and provide the src
with any of the available props.
Props
src {string} | required
The image source.
loader {string}
Adds a custom loader to the component. When not provided, applies a default one.
loaderStyle {object}
Adds custom styling to the loader.
loaderClass {string}
Adds CSS classes to the loader.
placeholder {boolean | string}
Adds a placeholder background to the component.
You can override the default placeholder background and add your own by passing an image URL to this prop.
placeholderStyle {object}
Adds custom styling to the placeholder.
placeholderClass {string}
Adds CSS classes to the placeholder.
animation {string} | Default: fadeIn
Add a CSS3 powered animation to the image as it appears.
react-image-appear has the following built-in CSS3 animations -
fadeIn (default)
fadeInUp
fadeInRight
fadeInDown
fadeInLeft
bounceIn
bounceInUp
bounceInRight
bounceInDown
bounceInLeft
flipInX
flipInY
zoomIn
blurIn
blurInUp
blurInRight
blurInDown
blurInLeft
fillIn
animationDuration {string} | Default: 700ms
Specifies the animation duration for the image to appear.
easing {string} | Default: ease-in-out
Specifies the timing-function for the CSS3 powered animation.
showLoader {boolean} | Default: true
Specifies whether to show the loader or not.
Testing
ReactImageAppear uses the jest test runner along with enzyme for easier assertion and manipulation. Run the following command to start the jest test runner -