A React component that creates placeholder images for your project in progress πŸ“Œ
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


Placeholder Image Examples

Build Status Dependencies Dev Dependencies Known Vulnerabilities NPM Downloads

React Placeholder Component πŸ“Œ

React component that creates placeholder images for your project in progress. Inject placeholder images form a varierty of popular services with ease.


npm install react-placeholder-component --save

General Usage

import ImagePlaceholder from 'react-placeholder-component';
<ImagePlaceholder source="baconMockup" width="450" height="310" />

The above will result in <img src="http://baconmockup.com/220/200" width="450" height="310" alt="baconMockup"> being rendered on the view. Plays well with create-react-app πŸŽ‰

Placeholder Sources

<ImagePlaceholder source="unsplashIt" />
<ImagePlaceholder source="placeHolder" />
<ImagePlaceholder source="placeImg" />
<ImagePlaceholder source="placeImgAnimals" />
<ImagePlaceholder source="placeImgArch" />
<ImagePlaceholder source="placeImgNature" />
<ImagePlaceholder source="placeImgPeople" />
<ImagePlaceholder source="placeImgTech" />
<ImagePlaceholder source="fillMurray" />
<ImagePlaceholder source="fillMurrayGrey" />
<ImagePlaceholder source="fakeImgPlease" />
<ImagePlaceholder source="placeCageCalm" />
<ImagePlaceholder source="placeCageGray" />
<ImagePlaceholder source="placeCageCrazy" />
<ImagePlaceholder source="placeBear" />
<ImagePlaceholder source="placeBearGrey" />
<ImagePlaceholder source="baconMockup" />
<ImagePlaceholder source="placeBeard" />
<ImagePlaceholder source="stevenseGallery" />

Sources List

["https://unsplash.it", "http://via.placeholder.com", "https://placeimg.com", "http://fillmurray.com", "http://fillmurray.com", "http://fakeimg.pl", "http://placecage.com", "https://placebear.com", "http://baconmockup.com", "http://placebeard.it", "http://stevensegallery.com"]


You can pass the following props to the ImagePlaceholder component to fine-tune the output.

Prop Default Description
source unsplashIt source of placeholder images
height 320 height of rendered image
width 320 width of rendered image

Development & Contributions

Feature requests/pull requests are welcome. To begin development please fork/clone this repository and run it's development/build enviroment (webpack).

npm install
npm start

The Jest test suite can also be started with npm test or npm test:watch πŸ”¬

To dev-test the component in a testing-project please run npm link on the repository directory and follow below.

npm install -g create-react-app
create-react-app .
npm link react-placeholder-component


Released under The MIT License originally developed by Alex Whinfield