This project shows the HTML Loader Element until the image is not fully loaded .Once the image is loaded ,the HTML Loader Element is replaced by image with the desired styles passed.
Steps to follow:
-
git clone this project
-
Create your react project inside the image-placeholder-assignment
-
npm install --save ../image-placeholder-grofers
-
Wherever you want to use this image-placeholder , import it import ImageComponent from 'image-palceholder';
-
Create the object for the image tag which contains the styles for the corresponding images Example :
let obj = { "src" : "http://freebigpictures.com/wp-content/uploads/2009/09/cumulonimbus.jpg", "width" : "500 px", "height" : "700px " }
-
Use this component (I am using at root level passing the created obj ) ReactDOM.render(, document.getElementById('app'));