ReactImg
React component for making your site images appear in a fade in. See a demo.
Install
yarn add react-image-smooth-loading
Note: styled-components, react and react-dom were added as peer dependencies. If you don't have then you must install them as well.
yarn add react-image-smooth-loading styled-components react react-dom
Usage
// Define which placeholder to show while the image is loading// Can be any image file.// There's already a default one in base64, but you'd like to change ;)ImgglobalPlaceholder = '/images/placeholder.png' { return <div className="image-grid"> list
Remember that Img is totally responsive, which means that it will fit accordingly to the space given to it by its container.
Options
const props = src: PropTypesstringisRequired placeholder: PropTypesstring // Optional image placeholder, overrides globalPlaceholder, imgClasses: PropTypes holderClasses: PropTypes placeholderProps: PropTypesobject onClick: PropTypesfunc alt: PropTypesstring <Img ...props />>