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.