Allows you display a placeholder image while the actual background image loads
npm install react-background-image-loader --save
In order to build / modify the component locally just run npm watch
.
import React from 'react';
import BackgroundImage from 'react-background-image-loader';
export default (props) => {
const {source, ...otherProps} = props;
const localImage = '/path/to/local/asset';
return(
<BackgroundImage src={source} placeholder={localImage} {...otherProps}>
<div className="something-else">
Some more markup
</div>
<SomeOtherReactComponent />
</BackgroundImage>
);
}
prop | type | notes |
---|---|---|
src | string | Remote image to be loaded |
placeholder | string | Local image to be immediately displayed |
MIT License