react-background-image

Display a placeholder image while the real image loads.

Install

npm install --save react-background-image

Usage

import React from 'react';
import BackgroundImage from 'react-background-image';
import placeholder from './images/small.jpg';
import hdImage from './images/large.jpg';

export default function App() {
  return (
    <div className='main'>
      <BackgroundImage
        placeholder={placeholder}
        src={hdImage}
        className='myCustomClass'
        {...otherProps}
      >
        <p className='some-class'>Other element</p>
        <OtherReactComponent />
      </BackgroundImage>
    </div>
  );
}

Props

Prop	Type	Notes
src	String	HD image to load
placeholder	String	Placeholder image to be immediately displayed
className	String	Optional custom css class

Demo

https://jonatanramhoj.github.io/react-background-image/

License

MIT © jonatanramhoj