Background-Image-On-Load
January 10, 2018
A simple way to check background-image
is loaded.
Installation
npm:
npm install background-image-on-load --save
yarn:
yarn add background-image-on-load
Usage
import React, { Component } from 'react';
import BackgroundImageOnLoad from 'background-image-on-load';
class App extends Component {
state = {
bgIsLoaded: false
};
render() {
const { bgIsLoaded } = this.state;
return (
<div
style={{
height: 300,
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundImage: `url(${!bgIsLoaded ? 'https://picsum.photos/310/310?blur' : 'https://picsum.photos/1600/310'})`
}}
>
<BackgroundImageOnLoad
src={'https://unsplash.it/1200/310?random'}
onLoadBg={() =>
this.setState({
bgIsLoaded: true
})}
onError={err => console.log('error', err)}
/>
</div>
);
}
}
export default App;
If you like this library please click on the start button on github.