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