react-avatar - npm Package Compare versions

Comparing version 3.1.2 to 3.2.0

lib/context.js

@@ -32,2 +32,6 @@ 'use strict';
 
+var _keys = require('babel-runtime/core-js/object/keys');
+
+var _keys2 = _interopRequireDefault(_keys);
+
 var _react = require('react');
@@ -51,5 +55,8 @@
     cache: _cache2.default,
-    colors: _utils.defaultColors
+    colors: _utils.defaultColors,
+    avatarRedirectUrl: null
 };
 
+var contextKeys = (0, _keys2.default)(defaults);
+
 /**
@@ -108,8 +115,11 @@ * withConfig and ConfigProvider provide a compatibility layer for different
         value: function _getContext() {
-            var _props = this.props,
-                cache = _props.cache,
-                colors = _props.colors;
+            var _this2 = this;
 
+            var context = {};
 
-            return { cache: cache, colors: colors };
+            contextKeys.forEach(function (key) {
+                if (typeof _this2.props[key] !== 'undefined') context[key] = _this2.props[key];
+            });
+
+            return context;
         }
@@ -138,2 +148,3 @@ }, {
     colors: _propTypes2.default.arrayOf(_propTypes2.default.string),
+    avatarRedirectUrl: _propTypes2.default.string,
 
@@ -140,0 +151,0 @@ children: _propTypes2.default.node

lib/demo.js

@@ -136,15 +136,36 @@ 'use strict';
                 _react2.default.createElement(
-                    'section',
-                    null,
+                    _index.ConfigProvider,
+                    { avatarRedirectUrl: 'https://avatar-redirect.appspot.com' },
                     _react2.default.createElement(
-                        'h2',
+                        'section',
                         null,
-                        'Twitter'
-                    ),
-                    _react2.default.createElement(_index2.default, { twitterHandle: 'sitebase', size: 40 }),
-                    _react2.default.createElement(_index2.default, { twitterHandle: 'sitebase', size: 100, round: true }),
-                    _react2.default.createElement(_index2.default, { twitterHandle: 'sitebase', size: 150, round: '20px' }),
-                    _react2.default.createElement(_index2.default, { twitterHandle: 'sitebase', size: 200 })
+                        _react2.default.createElement(
+                            'h2',
+                            null,
+                            'Twitter using Avatar Redirect'
+                        ),
+                        _react2.default.createElement(_index2.default, { twitterHandle: 'sitebase', size: 40 }),
+                        _react2.default.createElement(_index2.default, { twitterHandle: 'sitebase', size: 100, round: true }),
+                        _react2.default.createElement(_index2.default, { twitterHandle: 'sitebase', size: 150, round: '20px' }),
+                        _react2.default.createElement(_index2.default, { twitterHandle: 'sitebase', size: 200 })
+                    )
                 ),
                 _react2.default.createElement(
+                    _index.ConfigProvider,
+                    { avatarRedirectUrl: 'https://avatar-redirect.appspot.com' },
+                    _react2.default.createElement(
+                        'section',
+                        null,
+                        _react2.default.createElement(
+                            'h2',
+                            null,
+                            'Instagram using Avatar Redirect'
+                        ),
+                        _react2.default.createElement(_index2.default, { instagramId: 'sitebase', size: 40 }),
+                        _react2.default.createElement(_index2.default, { instagramId: 'sitebase', size: 100, round: true }),
+                        _react2.default.createElement(_index2.default, { instagramId: 'sitebase', size: 150, round: '20px' }),
+                        _react2.default.createElement(_index2.default, { instagramId: 'sitebase', size: 200 })
+                    )
+                ),
+                _react2.default.createElement(
                     'section',
@@ -151,0 +172,0 @@ null,

lib/index.js

@@ -102,5 +102,9 @@ 'use strict';
 
+var _AvatarRedirect = require('./sources/AvatarRedirect');
+
+var _AvatarRedirect2 = _interopRequireDefault(_AvatarRedirect);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var SOURCES = [_Facebook2.default, _Google2.default, _Twitter2.default, _Vkontakte2.default, _Skype2.default, _Gravatar2.default, _Src2.default, _Value2.default, _Icon2.default];
+var SOURCES = [_Facebook2.default, _Google2.default, _Twitter2.default, (0, _AvatarRedirect2.default)('twitter', 'twitterHandle'), (0, _AvatarRedirect2.default)('instagram', 'instagramId'), _Vkontakte2.default, _Skype2.default, _Gravatar2.default, _Src2.default, _Value2.default, _Icon2.default];
 
@@ -107,0 +111,0 @@ // Collect propTypes for each individual source

package.json

 {
   "name": "react-avatar",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "Universal React avatar component makes it possible to generate avatars based on user information.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -8,5 +8,7 @@ # <Avatar>[![Build Status](https://travis-ci.org/Sitebase/react-avatar.svg?branch=master)](https://travis-ci.org/Sitebase/react-avatar)
 For the moment we support following types:
+
 * Facebook
 * Google
-* Twitter
+* Twitter (using [Avatar Redirect](#avatar-redirect))
+* Instagram (using [Avatar Redirect](#avatar-redirect))
 * Vkontakte
@@ -105,2 +107,3 @@ * Skype
 | `twitterHandle` | *string* |         |                                                                                                        |
+| `instagramId` | *string* |         |                                                                                                        |
 | `googleId`   | *string*             |         |                                                                                                        |
@@ -127,3 +130,18 @@ | `skypeId`    | *string*          |         |                                                                                                        |
 | `cache`       | *[cache](#implementing-a-custom-cache)*          | [internal cache](https://github.com/Sitebase/react-avatar/tree/master/src/cache.js)  | Cache implementation used to track broken img URLs |
+| `avatarRedirectUrl`  | *URL*          | `undefined`  | Base URL to a [Avatar Redirect](#avatar-redirect) instance |
 
+
+### Avatar Redirect
+
+[Avatar Redirect][2] adds support for social networks which require a server-side service to find the correct avatar URL.
+
+Examples of this are:
+
+- Twitter
+- Instagram
+
+An open Avatar Redirect endpoint is provided at `https://avatar-redirect.appspot.com`. However this endpoint is provided for free and as such an explicit opt-in is required as no guarantees can be made about uptime of this endpoint.
+
+Avatar Redirect is enabled by setting the `avatarRedirectUrl` property on the [ConfigProvider context](#configprovider)
+
 ## Development
@@ -188,1 +206,2 @@
 [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/length
+[2]: https://github.com/JorgenEvens/avatar-redirect

src/context.js

@@ -9,5 +9,8 @@ import React from 'react';
     cache: defaultCache,
-    colors: defaultColors
+    colors: defaultColors,
+    avatarRedirectUrl: null
 };
 
+const contextKeys = Object.keys(defaults);
+
 /**
@@ -53,2 +56,3 @@ * withConfig and ConfigProvider provide a compatibility layer for different
         colors: PropTypes.arrayOf(PropTypes.string),
+        avatarRedirectUrl: PropTypes.string,
 
@@ -69,5 +73,10 @@ children: PropTypes.node
     _getContext() {
-        const { cache, colors } = this.props;
+        const context = {};
 
-        return { cache, colors };
+        contextKeys.forEach(key => {
+            if (typeof this.props[key] !== 'undefined')
+                context[key] = this.props[key];
+        });
+
+        return context;
     }
@@ -74,0 +83,0 @@

src/demo.js

@@ -85,10 +85,22 @@ 'use strict';
 
-                <section>
-                    <h2>Twitter</h2>
-                    <Avatar twitterHandle="sitebase" size={40} />
-                    <Avatar twitterHandle="sitebase" size={100} round={true} />
-                    <Avatar twitterHandle="sitebase" size={150} round="20px" />
-                    <Avatar twitterHandle="sitebase" size={200} />
-                </section>
+                <ConfigProvider avatarRedirectUrl="https://avatar-redirect.appspot.com">
+                    <section>
+                        <h2>Twitter using Avatar Redirect</h2>
+                        <Avatar twitterHandle="sitebase" size={40} />
+                        <Avatar twitterHandle="sitebase" size={100} round={true} />
+                        <Avatar twitterHandle="sitebase" size={150} round="20px" />
+                        <Avatar twitterHandle="sitebase" size={200} />
+                    </section>
+                </ConfigProvider>
 
+                <ConfigProvider avatarRedirectUrl="https://avatar-redirect.appspot.com">
+                    <section>
+                        <h2>Instagram using Avatar Redirect</h2>
+                        <Avatar instagramId="sitebase" size={40} />
+                        <Avatar instagramId="sitebase" size={100} round={true} />
+                        <Avatar instagramId="sitebase" size={150} round="20px" />
+                        <Avatar instagramId="sitebase" size={200} />
+                    </section>
+                </ConfigProvider>
+
                 <section>
@@ -95,0 +107,0 @@ <h2>Vkontakte</h2>

src/index.js

@@ -19,2 +19,3 @@ 'use strict';
 import iconSource from './sources/Icon';
+import redirectSource from './sources/AvatarRedirect';
 
@@ -25,2 +26,4 @@ const SOURCES = [
     twitterSource,
+    redirectSource('twitter', 'twitterHandle'),
+    redirectSource('instagram', 'instagramId'),
     vkontakteSource,
@@ -27,0 +30,0 @@ skypeSource,

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1879143

increased by6.1%

Number of package files

45

increased by4.65%

Lines of code

43612

increased by0.77%

Number of lines in readme file

203

increased by9.73%

Number of low supply chain risk alerts

322

decreased by-53.2%

No dependency changes