Skip to content

A React component that creates placeholder images from a variety of different sources for your project in progress. This project is not currently maintained so please use at your own risk.

master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

This repository is no longer maintained

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.

Install

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"]

Configuration

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

Licence

Released under The MIT License originally developed by Alex Whinfield

About

A React component that creates placeholder images from a variety of different sources for your project in progress. This project is not currently maintained so please use at your own risk.

Topics

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.