├── .eslintignore
├── .eslintrc
├── .gitignore
├── README.md
├── lib
    ├── CloudinaryImage.js
    ├── CloudinaryImageNative.js
    ├── CloudinaryVideo.js
    ├── cloudinary.js
    ├── index.js
    └── native.js
├── modules
    ├── .babelrc
    ├── CloudinaryImage.js
    ├── CloudinaryImageNative.js
    ├── CloudinaryVideo.js
    ├── cloudinary.js
    ├── index.js
    └── native.js
└── package.json


/.eslintignore:
--------------------------------------------------------------------------------
1 | lib/cloudinary.js
2 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "airbnb",
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 | 
20 | # node-waf configuration
21 | .lock-wscript
22 | 
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 | 
26 | # Dependency directory
27 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
28 | node_modules
29 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-cloudinary
 2 | 
 3 | Simple wrapper around [cloudinary_npm](https://github.com/cloudinary/cloudinary_npm).
 4 | 
 5 | # installation
 6 | 
 7 |     npm install react-cloudinary --save
 8 | 
 9 | # usage
10 | 
11 |     import { cloudinaryConfig, CloudinaryImage, CloudinaryVideo } from 'react-cloudinary';
12 | 
13 |     cloudinaryConfig({ cloud_name: 'xxxx' });
14 | 
15 |     const imagePublicId = 'imagePublicId';
16 |     <CloudinaryImage publicId={imagePublicId} options={{ width: 300, height: 300 }} />
17 | 
18 |     const videoPublicId = 'videoPublicId';
19 |     <CloudinaryImage publicId={videoPublicId} options={{ width: 300, height: 300, controles: true, preload: 'auto' }} />
20 | 


--------------------------------------------------------------------------------
/lib/CloudinaryImage.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | exports.__esModule = true;
 4 | 
 5 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 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 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
10 | 
11 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
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 _propTypes = require('prop-types');
22 | 
23 | var _propTypes2 = _interopRequireDefault(_propTypes);
24 | 
25 | var cloudinary = require('./cloudinary');
26 | 
27 | var CloudinaryImage = (function (_Component) {
28 |   _inherits(CloudinaryImage, _Component);
29 | 
30 |   function CloudinaryImage() {
31 |     _classCallCheck(this, CloudinaryImage);
32 | 
33 |     _Component.apply(this, arguments);
34 |   }
35 | 
36 |   CloudinaryImage.prototype.render = function render() {
37 |     var _props = this.props;
38 |     var publicId = _props.publicId;
39 |     var options = _props.options;
40 | 
41 |     var other = _objectWithoutProperties(_props, ['publicId', 'options']);
42 | 
43 |     return _react2['default'].createElement('img', _extends({}, other, { src: cloudinary.url(publicId, options) }));
44 |   };
45 | 
46 |   _createClass(CloudinaryImage, null, [{
47 |     key: 'propTypes',
48 |     value: {
49 |       publicId: _propTypes2['default'].string.isRequired,
50 |       options: _propTypes2['default'].object
51 |     },
52 |     enumerable: true
53 |   }]);
54 | 
55 |   return CloudinaryImage;
56 | })(_react.Component);
57 | 
58 | exports['default'] = CloudinaryImage;
59 | module.exports = exports['default'];


--------------------------------------------------------------------------------
/lib/CloudinaryImageNative.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | exports.__esModule = true;
 4 | 
 5 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 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 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
10 | 
11 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
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 _propTypes = require('prop-types');
22 | 
23 | var _propTypes2 = _interopRequireDefault(_propTypes);
24 | 
25 | var _reactNative = require('react-native');
26 | 
27 | var cloudinary = require('./cloudinary');
28 | 
29 | var CloudinaryImage = (function (_Component) {
30 |   _inherits(CloudinaryImage, _Component);
31 | 
32 |   function CloudinaryImage() {
33 |     _classCallCheck(this, CloudinaryImage);
34 | 
35 |     _Component.apply(this, arguments);
36 |   }
37 | 
38 |   CloudinaryImage.prototype.render = function render() {
39 |     var _props = this.props;
40 |     var publicId = _props.publicId;
41 |     var options = _props.options;
42 | 
43 |     var other = _objectWithoutProperties(_props, ['publicId', 'options']);
44 | 
45 |     return _react2['default'].createElement(_reactNative.Image, _extends({}, other, { source: { uri: cloudinary.url(publicId, options) } }));
46 |   };
47 | 
48 |   _createClass(CloudinaryImage, null, [{
49 |     key: 'propTypes',
50 |     value: {
51 |       publicId: _propTypes2['default'].string.isRequired,
52 |       options: _propTypes2['default'].object
53 |     },
54 |     enumerable: true
55 |   }]);
56 | 
57 |   return CloudinaryImage;
58 | })(_react.Component);
59 | 
60 | exports['default'] = CloudinaryImage;
61 | module.exports = exports['default'];


--------------------------------------------------------------------------------
/lib/CloudinaryVideo.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | exports.__esModule = true;
 4 | 
 5 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 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 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
10 | 
11 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
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 _propTypes = require('prop-types');
22 | 
23 | var _propTypes2 = _interopRequireDefault(_propTypes);
24 | 
25 | var cloudinary = require('./cloudinary');
26 | 
27 | var CloudinaryVideo = (function (_Component) {
28 |   _inherits(CloudinaryVideo, _Component);
29 | 
30 |   function CloudinaryVideo() {
31 |     _classCallCheck(this, CloudinaryVideo);
32 | 
33 |     _Component.apply(this, arguments);
34 |   }
35 | 
36 |   CloudinaryVideo.prototype.componentDidMount = function componentDidMount() {
37 |     var _props = this.props;
38 |     var publicId = _props.publicId;
39 |     var options = _props.options;
40 |     var videoNode = document.createElement('div');
41 |     videoNode.innerHTML = cloudinary.video(publicId, options);
42 |     this.refs.video.insertBefore(videoNode, null);
43 |   };
44 | 
45 |   CloudinaryVideo.prototype.render = function render() {
46 |     var _props2 = this.props;
47 |     var publicId = _props2.publicId;
48 |     var options = _props2.options;
49 | 
50 |     var other = _objectWithoutProperties(_props2, ['publicId', 'options']);
51 | 
52 |     return _react2['default'].createElement('div', _extends({}, other, { ref: 'video' }));
53 |   };
54 | 
55 |   _createClass(CloudinaryVideo, null, [{
56 |     key: 'propTypes',
57 |     value: {
58 |       publicId: _propTypes2['default'].string.isRequired,
59 |       options: _propTypes2['default'].object
60 |     },
61 |     enumerable: true
62 |   }]);
63 | 
64 |   return CloudinaryVideo;
65 | })(_react.Component);
66 | 
67 | exports['default'] = CloudinaryVideo;
68 | module.exports = exports['default'];
69 | 


--------------------------------------------------------------------------------
/lib/cloudinary.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | var cloudinary = require('cloudinary-core');
4 | 
5 | module.exports = cloudinary.Cloudinary['new']();


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | exports.__esModule = true;
 4 | exports.cloudinaryConfig = cloudinaryConfig;
 5 | exports.cloudinaryUrl = cloudinaryUrl;
 6 | 
 7 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 8 | 
 9 | var cloudinary = require('./cloudinary');
10 | 
11 | function cloudinaryConfig(config) {
12 |   cloudinary.config(config);
13 | }
14 | 
15 | function cloudinaryUrl(publicId, options) {
16 |   return cloudinary.url(publicId, options);
17 | }
18 | 
19 | var _CloudinaryImage2 = require('./CloudinaryImage');
20 | 
21 | var _CloudinaryImage3 = _interopRequireDefault(_CloudinaryImage2);
22 | 
23 | exports.CloudinaryImage = _CloudinaryImage3['default'];
24 | 
25 | var _CloudinaryVideo2 = require('./CloudinaryVideo');
26 | 
27 | var _CloudinaryVideo3 = _interopRequireDefault(_CloudinaryVideo2);
28 | 
29 | exports.CloudinaryVideo = _CloudinaryVideo3['default'];


--------------------------------------------------------------------------------
/lib/native.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | exports.__esModule = true;
 4 | 
 5 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 6 | 
 7 | var _CloudinaryImageNative2 = require('./CloudinaryImageNative');
 8 | 
 9 | var _CloudinaryImageNative3 = _interopRequireDefault(_CloudinaryImageNative2);
10 | 
11 | exports.CloudinaryImageNative = _CloudinaryImageNative3['default'];


--------------------------------------------------------------------------------
/modules/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "stage": 0,
3 |   "loose": "all",
4 | }
5 | 


--------------------------------------------------------------------------------
/modules/CloudinaryImage.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | const cloudinary = require('./cloudinary');
 4 | 
 5 | export default class CloudinaryImage extends Component {
 6 |   static propTypes = {
 7 |     publicId: PropTypes.string.isRequired,
 8 |     options: PropTypes.object,
 9 |   }
10 | 
11 |   render() {
12 |     const { publicId, options, ...other } = this.props;
13 | 
14 |     return (
15 |       <img {...other} src={cloudinary.url(publicId, options)} />
16 |     );
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/modules/CloudinaryImageNative.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { Image } from 'react-native';
 4 | const cloudinary = require('./cloudinary');
 5 | 
 6 | export default class CloudinaryImage extends Component {
 7 |   static propTypes = {
 8 |     publicId: PropTypes.string.isRequired,
 9 |     options: PropTypes.object,
10 |   }
11 | 
12 |   render() {
13 |     const { publicId, options, ...other } = this.props;
14 | 
15 |     return (
16 |       <Image {...other} source={{ uri: cloudinary.url(publicId, options)}} />
17 |     );
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/modules/CloudinaryVideo.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | const cloudinary = require('./cloudinary');
 4 | 
 5 | export default class CloudinaryVideo extends Component {
 6 |   static propTypes = {
 7 |     publicId: PropTypes.string.isRequired,
 8 |     options: PropTypes.object,
 9 |   }
10 | 
11 |   componentDidMount() {
12 |     const { publicId, options } = this.props;
13 |     this.refs.video.insertBefore(cloudinary.video(publicId, options), null);
14 |   }
15 | 
16 |   render() {
17 |     const { publicId, options, ...other } = this.props;
18 |     return (
19 |       <div {...other} ref="video"></div>
20 |     );
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/modules/cloudinary.js:
--------------------------------------------------------------------------------
1 | const cloudinary = require('cloudinary-core');
2 | 
3 | module.exports = cloudinary.Cloudinary.new();
4 | 


--------------------------------------------------------------------------------
/modules/index.js:
--------------------------------------------------------------------------------
 1 | const cloudinary = require('./cloudinary');
 2 | 
 3 | export function cloudinaryConfig(config) {
 4 |   cloudinary.config(config);
 5 | }
 6 | 
 7 | export function cloudinaryUrl(publicId, options) {
 8 |   return cloudinary.url(publicId, options);
 9 | }
10 | 
11 | export CloudinaryImage from './CloudinaryImage';
12 | export CloudinaryVideo from './CloudinaryVideo';
13 | 


--------------------------------------------------------------------------------
/modules/native.js:
--------------------------------------------------------------------------------
1 | export CloudinaryImageNative from './CloudinaryImageNative';
2 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-cloudinary",
 3 |   "version": "0.4.1",
 4 |   "description": "react components to render cloudinary image and video.",
 5 |   "main": "lib/index",
 6 |   "scripts": {
 7 |     "build": "babel ./modules -d lib",
 8 |     "lint": "eslint -c .eslintrc .",
 9 |     "prepublish": "npm run build",
10 |     "test": "echo \"Error: no test specified\" && exit 1"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://seokgyo@github.com/seokgyo/react-cloudinary.git"
15 |   },
16 |   "keywords": [
17 |     "react",
18 |     "cloudinary"
19 |   ],
20 |   "author": "seokgyo@gmail.com",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/seokgyo/react-cloudinary/issues"
24 |   },
25 |   "homepage": "https://github.com/seokgyo/react-cloudinary#readme",
26 |   "dependencies": {
27 |     "babel": "^5.8.38",
28 |     "babel-core": "^5.8.38",
29 |     "cloudinary-core": "^2.1.0"
30 |   },
31 |   "devDependencies": {
32 |     "babel": "^5.8.23",
33 |     "babel-core": "^5.8.24",
34 |     "babel-eslint": "^4.1.2",
35 |     "eslint": "^1.4.3",
36 |     "eslint-config-airbnb": "0.0.8",
37 |     "eslint-plugin-react": "^3.4.1",
38 |     "prop-types": "^15.6.0",
39 |     "react": "^15.6.2"
40 |   }
41 | }
42 | 


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