├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── index.js
├── package.json
└── src
    └── index.jsx


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | index.js
3 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | *.jsx
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 |            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
 2 |                    Version 2, December 2004
 3 | 
 4 | Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
 5 | 
 6 | Everyone is permitted to copy and distribute verbatim or modified
 7 | copies of this license document, and changing it is allowed as long
 8 | as the name is changed.
 9 | 
10 |            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
11 |   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
12 | 
13 |  0. You just DO WHAT THE FUCK YOU WANT TO.
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-image-placeholder
 2 | A simple image placeholder component that uses some of the many placeholder sites + some funky components for the swag.
 3 | 
 4 | Why?
 5 | ==============
 6 | There are many placeholder site here, i regrouped them for you in a nice little component.
 7 | 
 8 | ImagePlaceholder uses the following sites:
 9 | 
10 | - http://baconmockup.com
11 | - http://placebeard.it
12 | - http://unsplash.it
13 | 
14 | and 
15 | 
16 | - http://lorempixel.com for everything more generic
17 | 
18 | Installation
19 | ==============
20 | ```bash
21 | npm install react-image-placeholder
22 | ```
23 | 
24 | Usage (ES6 + JSX):
25 | ==============
26 | 
27 | ```javascript
28 | import ImagePlaceholder from './image-placeholder/image-placeholder';
29 | 
30 | React.render(
31 |   <div>
32 |     <ImagePlaceholder type="beer" width="300" height="300" />
33 |     <ImagePlaceholder text="my text" width="600" height="400" />
34 |   </div>, 
35 |   document.getElementById('root')
36 | );
37 | ```


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | Object.defineProperty(exports, '__esModule', {
  4 |   value: true
  5 | });
  6 | 
  7 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
  8 | 
  9 | var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 10 | 
 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 12 | 
 13 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
 14 | 
 15 | function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 16 | 
 17 | var _react = require('react');
 18 | 
 19 | var _react2 = _interopRequireDefault(_react);
 20 | 
 21 | var ImagePlaceholder = (function (_Component) {
 22 |   _inherits(ImagePlaceholder, _Component);
 23 | 
 24 |   function ImagePlaceholder() {
 25 |     _classCallCheck(this, ImagePlaceholder);
 26 | 
 27 |     _get(Object.getPrototypeOf(ImagePlaceholder.prototype), 'constructor', this).apply(this, arguments);
 28 |   }
 29 | 
 30 |   _createClass(ImagePlaceholder, [{
 31 |     key: 'render',
 32 |     value: function render() {
 33 |       var rand = 150 + Math.round(Math.random() * 150);
 34 |       var w = this.props.width || rand;
 35 |       var h = this.props.height || rand;
 36 |       var types = {
 37 |         'nicolas-cage': 'http://www.placecage.com/' + w + '/' + h,
 38 |         'bill-murray': 'http://www.fillmurray.com/' + w + '/' + h,
 39 |         'steven-seagal': 'http://www.stevensegallery.com/' + w + '/' + h,
 40 |         'the-hoff': 'http://place-hoff.com/' + w + '/' + h,
 41 |         'vanilla-ice': 'http://nicenicejpg.com/' + w + '/' + h,
 42 |         'bacon': 'http://baconmockup.com/' + w + '/' + h,
 43 |         'beard': 'http://placebeard.it/' + w + '/' + h,
 44 |         'beer': 'http://beerhold.it/' + w + '/' + h,
 45 | 
 46 |         'cats': 'http://lorempixel.com/' + w + '/' + h + '/cats',
 47 |         'nature': 'http://lorempixel.com/' + w + '/' + h + '/nature',
 48 |         'sports': 'http://lorempixel.com/' + w + '/' + h + '/sports',
 49 |         'food': 'http://lorempixel.com/' + w + '/' + h + '/food',
 50 |         'technics': 'http://lorempixel.com/' + w + '/' + h + '/technics',
 51 |         'people': 'http://lorempixel.com/' + w + '/' + h + '/people',
 52 |         'business': 'http://lorempixel.com/' + w + '/' + h + '/business',
 53 |         'city': 'http://lorempixel.com/' + w + '/' + h + '/city',
 54 |         'unsplash': 'https://unsplash.it/' + w + '/' + h + '?random'
 55 | 
 56 |       };
 57 | 
 58 |       var src = undefined;
 59 |       if (this.props.text) {
 60 |         src = 'http://dummyimage.com/' + w + 'x' + h + '/000000/FFFFFF?text=' + this.props.text;
 61 |       } else if (types[this.props.type]) {
 62 |         src = types[this.props.type];
 63 |       } else {
 64 |         src = 'http://dummyimage.com/' + w + 'x' + h + '/000000/FFFFFF?text=' + this.props.type;
 65 |       }
 66 | 
 67 |       return _react2['default'].createElement('img', { src: src, width: w, height: h, style: { backgroundColor: '#000' } });
 68 |     }
 69 |   }]);
 70 | 
 71 |   return ImagePlaceholder;
 72 | })(_react.Component);
 73 | 
 74 | exports['default'] = ImagePlaceholder;
 75 | 
 76 | ImagePlaceholder.defaultProps = { width: 150, height: 150, type: 'nature' };
 77 | ImagePlaceholder.propTypes = {
 78 |   width: _react2['default'].PropTypes.number,
 79 |   height: _react2['default'].PropTypes.number,
 80 |   type: _react2['default'].PropTypes.string
 81 | };
 82 | 
 83 | var NicolasCage = (function (_ImagePlaceholder) {
 84 |   _inherits(NicolasCage, _ImagePlaceholder);
 85 | 
 86 |   function NicolasCage() {
 87 |     _classCallCheck(this, NicolasCage);
 88 | 
 89 |     _get(Object.getPrototypeOf(NicolasCage.prototype), 'constructor', this).apply(this, arguments);
 90 |   }
 91 | 
 92 |   return NicolasCage;
 93 | })(ImagePlaceholder);
 94 | 
 95 | exports.NicolasCage = NicolasCage;
 96 | 
 97 | NicolasCage.defaultProps = { type: 'nicolas-cage' };
 98 | 
 99 | var BillMurray = (function (_ImagePlaceholder2) {
100 |   _inherits(BillMurray, _ImagePlaceholder2);
101 | 
102 |   function BillMurray() {
103 |     _classCallCheck(this, BillMurray);
104 | 
105 |     _get(Object.getPrototypeOf(BillMurray.prototype), 'constructor', this).apply(this, arguments);
106 |   }
107 | 
108 |   return BillMurray;
109 | })(ImagePlaceholder);
110 | 
111 | exports.BillMurray = BillMurray;
112 | 
113 | BillMurray.defaultProps = { type: 'bill-murray' };
114 | 
115 | var StevenSeagal = (function (_ImagePlaceholder3) {
116 |   _inherits(StevenSeagal, _ImagePlaceholder3);
117 | 
118 |   function StevenSeagal() {
119 |     _classCallCheck(this, StevenSeagal);
120 | 
121 |     _get(Object.getPrototypeOf(StevenSeagal.prototype), 'constructor', this).apply(this, arguments);
122 |   }
123 | 
124 |   return StevenSeagal;
125 | })(ImagePlaceholder);
126 | 
127 | exports.StevenSeagal = StevenSeagal;
128 | 
129 | StevenSeagal.defaultProps = { type: 'steven-seagal' };
130 | 
131 | var TheHoff = (function (_ImagePlaceholder4) {
132 |   _inherits(TheHoff, _ImagePlaceholder4);
133 | 
134 |   function TheHoff() {
135 |     _classCallCheck(this, TheHoff);
136 | 
137 |     _get(Object.getPrototypeOf(TheHoff.prototype), 'constructor', this).apply(this, arguments);
138 |   }
139 | 
140 |   return TheHoff;
141 | })(ImagePlaceholder);
142 | 
143 | exports.TheHoff = TheHoff;
144 | 
145 | TheHoff.defaultProps = { type: 'the-hoff' };
146 | 
147 | var VanillaIce = (function (_ImagePlaceholder5) {
148 |   _inherits(VanillaIce, _ImagePlaceholder5);
149 | 
150 |   function VanillaIce() {
151 |     _classCallCheck(this, VanillaIce);
152 | 
153 |     _get(Object.getPrototypeOf(VanillaIce.prototype), 'constructor', this).apply(this, arguments);
154 |   }
155 | 
156 |   return VanillaIce;
157 | })(ImagePlaceholder);
158 | 
159 | exports.VanillaIce = VanillaIce;
160 | 
161 | VanillaIce.defaultProps = { type: 'vanilla-ice' };
162 | 
163 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-image-placeholder",
 3 |   "description": "A simple placeholder component that uses some of the many placeholder sites + some funky components for the swag.",
 4 |   "author": "Nadir Kadem <nadir.kadem@gmail.com> (http://www.github.com/Youpinadi)",
 5 |   "version": "1.0.4",
 6 |   "license": "WTFPL",
 7 |   "main": "index.js",
 8 |   "keywords": [
 9 |     "react",
10 |     "reactjs",
11 |     "component",
12 |     "image",
13 |     "placeholder",
14 |     "react-component"
15 |   ],
16 |   "scripts": {
17 |     "build": "babel src/index.jsx > index.js",
18 |     "prepublish": "npm run build"
19 |   },
20 |   "repository": {
21 |     "type": "git",
22 |     "url": "https://github.com/Youpinadi/react-image-placeholder.git"
23 |   },
24 |   "devDependencies": {
25 |     "babel-core": "^5.4.7"
26 |   },
27 |   "dependencies": {
28 |     "react": "^0.13.0"
29 |   },
30 |   "bugs": {
31 |     "url": "https://github.com/Youpinadi/react-image-placeholder/issues"
32 |   },
33 |   "homepage": "https://github.com/Youpinadi/react-image-placeholder"
34 | }
35 | 


--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | 
 3 | export default class ImagePlaceholder extends Component {
 4 |   render() {
 5 |     let rand = 150 + Math.round(Math.random() * 150);
 6 |     let w = this.props.width || rand;
 7 |     let h = this.props.height || rand;
 8 |     let types = {
 9 |       'bacon': `http://baconmockup.com/${w}/${h}`,
10 |       'beard': `http://placebeard.it/${w}/${h}`,
11 | 
12 |       'cats': `http://lorempixel.com/${w}/${h}/cats`,
13 |       'nature': `http://lorempixel.com/${w}/${h}/nature`,
14 |       'sports': `http://lorempixel.com/${w}/${h}/sports`,
15 |       'food': `http://lorempixel.com/${w}/${h}/food`,
16 |       'technics': `http://lorempixel.com/${w}/${h}/technics`,
17 |       'people': `http://lorempixel.com/${w}/${h}/people`,
18 |       'business': `http://lorempixel.com/${w}/${h}/business`,
19 |       'city': `http://lorempixel.com/${w}/${h}/city`,
20 |       'unsplash' : `https://unsplash.it/${w}/${h}?random`
21 | 
22 |     };
23 | 
24 |     let src;
25 |     if (this.props.text){
26 |       src = `http://dummyimage.com/${w}x${h}/000000/FFFFFF?text=${this.props.text}`;
27 |     } else if (types[this.props.type]){
28 |         src = types[this.props.type];
29 |     } else {
30 |         src = `http://dummyimage.com/${w}x${h}/000000/FFFFFF?text=${this.props.type}`;
31 |     }
32 | 
33 |     return (<img src={src} width={w} height={h} style={ {backgroundColor: '#000'} } />);
34 |   }
35 | }
36 | ImagePlaceholder.defaultProps = {width: 150, height: 150, type: 'nature'};
37 | ImagePlaceholder.propTypes = {
38 |     width: React.PropTypes.number,
39 |     height: React.PropTypes.number,
40 |     type: React.PropTypes.string
41 | };


--------------------------------------------------------------------------------