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

Display a placeholder image while the real image loads.
https://github.com/jonatanramhoj/react-background-image

background-image component react react-component typescript

Last synced: 10 months ago
JSON representation

Display a placeholder image while the real image loads.

• Host: GitHub
• URL: https://github.com/jonatanramhoj/react-background-image
• Owner: jonatanramhoj
• Created: 2018-12-01T03:41:02.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-10-18T18:35:20.000Z (over 3 years ago)
• Last Synced: 2025-08-10T20:24:18.818Z (11 months ago)
• Topics: background-image, component, react, react-component, typescript
• Language: JavaScript
• Homepage: https://jonatanramhoj.github.io/react-background-image/
• Size: 2.85 MB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-background-image

> Display a placeholder image while the real image loads.

[![NPM](https://img.shields.io/npm/v/react-background-image.svg)](https://www.npmjs.com/package/react-background-image) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install --save react-background-image

```

## Usage

```tsx

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 (

    


      

        
Other element

        

      

    

  );

}

```


## 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](https://github.com/jonatanramhoj)