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 ="baconMockup" ="450" ="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 ="unsplashIt" /><ImagePlaceholder ="placeHolder" /><ImagePlaceholder ="placeImg" /><ImagePlaceholder ="placeImgAnimals" /><ImagePlaceholder ="placeImgArch" /><ImagePlaceholder ="placeImgNature" /><ImagePlaceholder ="placeImgPeople" /><ImagePlaceholder ="placeImgTech" /><ImagePlaceholder ="fillMurray" /><ImagePlaceholder ="fillMurrayGrey" /><ImagePlaceholder ="fakeImgPlease" /><ImagePlaceholder ="placeCageCalm" /><ImagePlaceholder ="placeCageGray" /><ImagePlaceholder ="placeCageCrazy" /><ImagePlaceholder ="placeBear" /><ImagePlaceholder ="placeBearGrey" /><ImagePlaceholder ="baconMockup" /><ImagePlaceholder ="placeBeard" /><ImagePlaceholder ="stevenseGallery" />
Sources List
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.