Background-Image-On-Load

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;