avatar-initials - npm Package Compare versions

Comparing version 5.0.1 to 6.0.0

browser/avatar.js

@@ -1,1 +0,1 @@
-var Avatar=function(){"use strict";function t(t,i){return t+i&4294967295}function i(i,e,a,s,n,r){return e=t(t(e,i),t(s,r)),t(e<<n|e>>>32-n,a)}function e(t,e,a,s,n,r,l){return i(e&a|~e&s,t,e,n,r,l)}function a(t,e,a,s,n,r,l){return i(e&s|a&~s,t,e,n,r,l)}function s(t,e,a,s,n,r,l){return i(e^a^s,t,e,n,r,l)}function n(t,e,a,s,n,r,l){return i(a^(e|~s),t,e,n,r,l)}function r(i,r){let l=i[0],c=i[1],h=i[2],o=i[3];l=e(l,c,h,o,r[0],7,-680876936),o=e(o,l,c,h,r[1],12,-389564586),h=e(h,o,l,c,r[2],17,606105819),c=e(c,h,o,l,r[3],22,-1044525330),l=e(l,c,h,o,r[4],7,-176418897),o=e(o,l,c,h,r[5],12,1200080426),h=e(h,o,l,c,r[6],17,-1473231341),c=e(c,h,o,l,r[7],22,-45705983),l=e(l,c,h,o,r[8],7,1770035416),o=e(o,l,c,h,r[9],12,-1958414417),h=e(h,o,l,c,r[10],17,-42063),c=e(c,h,o,l,r[11],22,-1990404162),l=e(l,c,h,o,r[12],7,1804603682),o=e(o,l,c,h,r[13],12,-40341101),h=e(h,o,l,c,r[14],17,-1502002290),c=e(c,h,o,l,r[15],22,1236535329),l=a(l,c,h,o,r[1],5,-165796510),o=a(o,l,c,h,r[6],9,-1069501632),h=a(h,o,l,c,r[11],14,643717713),c=a(c,h,o,l,r[0],20,-373897302),l=a(l,c,h,o,r[5],5,-701558691),o=a(o,l,c,h,r[10],9,38016083),h=a(h,o,l,c,r[15],14,-660478335),c=a(c,h,o,l,r[4],20,-405537848),l=a(l,c,h,o,r[9],5,568446438),o=a(o,l,c,h,r[14],9,-1019803690),h=a(h,o,l,c,r[3],14,-187363961),c=a(c,h,o,l,r[8],20,1163531501),l=a(l,c,h,o,r[13],5,-1444681467),o=a(o,l,c,h,r[2],9,-51403784),h=a(h,o,l,c,r[7],14,1735328473),c=a(c,h,o,l,r[12],20,-1926607734),l=s(l,c,h,o,r[5],4,-378558),o=s(o,l,c,h,r[8],11,-2022574463),h=s(h,o,l,c,r[11],16,1839030562),c=s(c,h,o,l,r[14],23,-35309556),l=s(l,c,h,o,r[1],4,-1530992060),o=s(o,l,c,h,r[4],11,1272893353),h=s(h,o,l,c,r[7],16,-155497632),c=s(c,h,o,l,r[10],23,-1094730640),l=s(l,c,h,o,r[13],4,681279174),o=s(o,l,c,h,r[0],11,-358537222),h=s(h,o,l,c,r[3],16,-722521979),c=s(c,h,o,l,r[6],23,76029189),l=s(l,c,h,o,r[9],4,-640364487),o=s(o,l,c,h,r[12],11,-421815835),h=s(h,o,l,c,r[15],16,530742520),c=s(c,h,o,l,r[2],23,-995338651),l=n(l,c,h,o,r[0],6,-198630844),o=n(o,l,c,h,r[7],10,1126891415),h=n(h,o,l,c,r[14],15,-1416354905),c=n(c,h,o,l,r[5],21,-57434055),l=n(l,c,h,o,r[12],6,1700485571),o=n(o,l,c,h,r[3],10,-1894986606),h=n(h,o,l,c,r[10],15,-1051523),c=n(c,h,o,l,r[1],21,-2054922799),l=n(l,c,h,o,r[8],6,1873313359),o=n(o,l,c,h,r[15],10,-30611744),h=n(h,o,l,c,r[6],15,-1560198380),c=n(c,h,o,l,r[13],21,1309151649),l=n(l,c,h,o,r[4],6,-145523070),o=n(o,l,c,h,r[11],10,-1120210379),h=n(h,o,l,c,r[2],15,718787259),c=n(c,h,o,l,r[9],21,-343485551),i[0]=t(l,i[0]),i[1]=t(c,i[1]),i[2]=t(h,i[2]),i[3]=t(o,i[3])}function l(t){const i=[];for(let e=0;e<64;e+=4)i[e>>2]=t.charCodeAt(e)+(t.charCodeAt(e+1)<<8)+(t.charCodeAt(e+2)<<16)+(t.charCodeAt(e+3)<<24);return i}const c="0123456789abcdef".split("");function h(t){let i="",e=0;for(;e<4;e++)i+=c[t>>8*e+4&15]+c[t>>8*e&15];return i}const o=t=>function(t){for(let i=0;i<t.length;i++)t[i]=h(t[i]);return t.join("")}(function(t){const i=t.length,e=[1732584193,-271733879,-1732584194,271733878];let a;for(a=64;a<=t.length;a+=64)r(e,l(t.slice(a-64,a)));t=t.slice(Math.max(0,a-64));const s=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];for(a=0;a<t.length;a++)s[a>>2]|=t.charCodeAt(a)<<(a%4<<3);if(s[a>>2]|=128<<(a%4<<3),a>55)for(r(e,s),a=0;a<16;a++)s[a]=0;return s[14]=8*i,r(e,s),e}(t));class g{constructor(t){let i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!t)throw new Error("No image element provided.");this.element=t,this.settings={useGravatar:!0,allowGravatarFallback:!1,initials:"",initial_fg:"#888888",initial_bg:"#f4f6f7",initial_size:0,initial_weight:100,initial_font_family:"'Lato', 'Lato-Regular', 'Helvetica Neue'",hash:"",email:"",size:80,fallback:"mm",rating:"x",forcedefault:!1,fallbackImage:"data:image/svg+xml,%3Csvg width='60' xmlns='http://www.w3.org/2000/svg' height='60' viewBox='0 0 60 60'%3E%3Cpath fill='%23bcc7ce' d='M0 0h60v60h-60z'/%3E%3Cg fill-rule='evenodd'%3E%3Cpath fill='%23a4b1b9' d='M30.1 54.8c-6.7 0-13.1-2.8-17.6-7.7l-.5-.5v-2.6h.2c.4-4 1.6-6.7 3.4-7.6 1.3-.6 2.9-1.1 4.9-1.6v-1l1-.3s.7-.2 1.7-.5c0-.5-.1-.7-.1-.9-.6-1-1.5-3.3-2.1-6l-1.7-1.4.2-.9s.2-.9 0-1.9c-.2-.9.1-1.5.3-1.8.3-.3.6-.5 1-.6.3-1.6.9-3.1 1.7-4.3-1.3-1.5-1.7-2.6-1.5-3.5.2-.9 1-1.5 1.9-1.5.7 0 1.3.3 1.9.6.3-.7.9-1.1 1.7-1.1.7 0 1.4.4 2.4.8.5.3 1.2.6 1.6.7 3.4.1 7.6 2.2 8.9 7.6.3.1.6.3.8.5.4.5.5 1.1.3 1.9-.2 1.2 0 2.4 0 2.4l.2.8-1.2 1.2c-.5 2.8-1.6 5.4-2.2 6.5-.1.1-.1.4-.1.8 1 .3 1.7.5 1.7.5l1 .4v.8c2.5.5 4.6 1.1 6.1 1.9 1.8.9 2.9 3.5 3.4 7.8l.1.6-.4.5c-4.6 5.9-11.5 9.4-19 9.4z'/%3E%3Cpath fill='%23fff' d='M45.4 36.8c-1.5-.8-3.9-1.5-7-2v-.9s-1-.4-2.6-.7c-.2-.8-.3-2 .2-2.8.5-.9 1.7-3.6 2.1-6.5l.9-.9s-.3-1.4 0-3c.2-.9-.4-.7-.9-.5-.9-7.1-6.3-7.7-7.8-7.7-1.4-.2-3.9-2.2-4.1-1.3-.1.9 1.2 1.8-.4 1.4-1.6-.4-3.1-1.8-3.3-.8-.2.7 1.2 2.3 2 3.1-1.2 1.3-2.1 3.2-2.4 6.1-.5-.3-1.4-.7-1.1.2.3 1.3 0 2.6 0 2.6l1.4 1.2c.5 2.7 1.5 5.1 2 6 .5.8.3 2.1.2 2.8-1.5.3-2.6.7-2.6.7v1.2c-2.5.5-4.4 1.1-5.8 1.7-2 1-2.6 5.7-2.7 7.9v.4c4.1 4.4 10 7.2 16.5 7.2 7.3 0 13.7-3.5 17.8-8.8-.1-2.3-.8-5.7-2.4-6.6z'/%3E%3C/g%3E%3C/svg%3E",github_id:0,setSourceCallback:()=>{},...i};let e=this.settings.fallbackImage;this.settings.useGravatar&&this.settings.allowGravatarFallback?e=g.gravatarUrl(this.settings):this.settings.useGravatar?this.gravatarValid():this.settings.github_id?e=g.githubAvatar(this.settings):this.settings.initials.length>0&&(e=g.initialAvatar(this.settings)),this.setSource(e)}static from(t,i){return new g(t,i)}setSource(t){if(!this.element)throw new Error("No image element set.");t&&(this.element.src=t,this.settings.setSourceCallback(t))}gravatarValid(){if(!this.settings.email&&!this.settings.hash)return;const t=this.settings.email?o(this.settings.email):this.settings.hash,i=new window.Image;i.addEventListener("load",this.gravatarValidOnLoad.bind(this)),i.addEventListener("error",this.gravatarValidOnError.bind(this)),i.src=`https://secure.gravatar.com/avatar/${t}?d=404`}gravatarValidOnLoad(){this.setSource(g.gravatarUrl(this.settings))}gravatarValidOnError(){this.settings.initials.length>0?this.setSource(g.initialAvatar(this.settings)):this.setSource(this.settings.fallbackImage)}static initialAvatar(t){const i=document.createElement("canvas"),e=t.size,a=t.size,s=Math.max(window.devicePixelRatio,1);i.width=e*s,i.height=a*s,i.style.width=`${e}px`,i.style.height=`${a}px`;const n=i.getContext("2d");return n.scale(s,s),n.rect(0,0,i.width,i.height),n.fillStyle=t.initial_bg,n.fill(),n.font=`${t.initial_weight} ${t.initial_size||a/2}px ${t.initial_font_family}`,n.textAlign="center",n.textBaseline="middle",n.fillStyle=t.initial_fg,n.fillText(t.initials,e/2,a/2),i.toDataURL("image/png")}static gravatarUrl(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const i=t.size&&t.size>=1&&t.size<=2048?t.size:80;let e=t.hash||t.email;e&&"string"==typeof e||(e="00000000000000000000000000000000"),e=e.toLowerCase().trim();return`https://secure.gravatar.com/avatar/${null!==e.match(/@/g)?o(e):e}?s=${i}&d=${t.fallback?encodeURIComponent(t.fallback):"mm"}&r=${t.rating||"x"}${t.forcedefault?"&f=y":""}`}static githubAvatar(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return`https://avatars.githubusercontent.com/u/${t.github_id||0}?s=${t.size||80}&v=4`}}return g}();
+var Avatar=function(){"use strict";function t(t,e){return t+e&4294967295}function e(e,i,a,r,s,n){return i=t(t(i,e),t(r,n)),t(i<<s|i>>>32-s,a)}function i(t,i,a,r,s,n,l){return e(i&a|~i&r,t,i,s,n,l)}function a(t,i,a,r,s,n,l){return e(i&r|a&~r,t,i,s,n,l)}function r(t,i,a,r,s,n,l){return e(i^a^r,t,i,s,n,l)}function s(t,i,a,r,s,n,l){return e(a^(i|~r),t,i,s,n,l)}function n(e,n){let l=e[0],o=e[1],c=e[2],h=e[3];l=i(l,o,c,h,n[0],7,-680876936),h=i(h,l,o,c,n[1],12,-389564586),c=i(c,h,l,o,n[2],17,606105819),o=i(o,c,h,l,n[3],22,-1044525330),l=i(l,o,c,h,n[4],7,-176418897),h=i(h,l,o,c,n[5],12,1200080426),c=i(c,h,l,o,n[6],17,-1473231341),o=i(o,c,h,l,n[7],22,-45705983),l=i(l,o,c,h,n[8],7,1770035416),h=i(h,l,o,c,n[9],12,-1958414417),c=i(c,h,l,o,n[10],17,-42063),o=i(o,c,h,l,n[11],22,-1990404162),l=i(l,o,c,h,n[12],7,1804603682),h=i(h,l,o,c,n[13],12,-40341101),c=i(c,h,l,o,n[14],17,-1502002290),o=i(o,c,h,l,n[15],22,1236535329),l=a(l,o,c,h,n[1],5,-165796510),h=a(h,l,o,c,n[6],9,-1069501632),c=a(c,h,l,o,n[11],14,643717713),o=a(o,c,h,l,n[0],20,-373897302),l=a(l,o,c,h,n[5],5,-701558691),h=a(h,l,o,c,n[10],9,38016083),c=a(c,h,l,o,n[15],14,-660478335),o=a(o,c,h,l,n[4],20,-405537848),l=a(l,o,c,h,n[9],5,568446438),h=a(h,l,o,c,n[14],9,-1019803690),c=a(c,h,l,o,n[3],14,-187363961),o=a(o,c,h,l,n[8],20,1163531501),l=a(l,o,c,h,n[13],5,-1444681467),h=a(h,l,o,c,n[2],9,-51403784),c=a(c,h,l,o,n[7],14,1735328473),o=a(o,c,h,l,n[12],20,-1926607734),l=r(l,o,c,h,n[5],4,-378558),h=r(h,l,o,c,n[8],11,-2022574463),c=r(c,h,l,o,n[11],16,1839030562),o=r(o,c,h,l,n[14],23,-35309556),l=r(l,o,c,h,n[1],4,-1530992060),h=r(h,l,o,c,n[4],11,1272893353),c=r(c,h,l,o,n[7],16,-155497632),o=r(o,c,h,l,n[10],23,-1094730640),l=r(l,o,c,h,n[13],4,681279174),h=r(h,l,o,c,n[0],11,-358537222),c=r(c,h,l,o,n[3],16,-722521979),o=r(o,c,h,l,n[6],23,76029189),l=r(l,o,c,h,n[9],4,-640364487),h=r(h,l,o,c,n[12],11,-421815835),c=r(c,h,l,o,n[15],16,530742520),o=r(o,c,h,l,n[2],23,-995338651),l=s(l,o,c,h,n[0],6,-198630844),h=s(h,l,o,c,n[7],10,1126891415),c=s(c,h,l,o,n[14],15,-1416354905),o=s(o,c,h,l,n[5],21,-57434055),l=s(l,o,c,h,n[12],6,1700485571),h=s(h,l,o,c,n[3],10,-1894986606),c=s(c,h,l,o,n[10],15,-1051523),o=s(o,c,h,l,n[1],21,-2054922799),l=s(l,o,c,h,n[8],6,1873313359),h=s(h,l,o,c,n[15],10,-30611744),c=s(c,h,l,o,n[6],15,-1560198380),o=s(o,c,h,l,n[13],21,1309151649),l=s(l,o,c,h,n[4],6,-145523070),h=s(h,l,o,c,n[11],10,-1120210379),c=s(c,h,l,o,n[2],15,718787259),o=s(o,c,h,l,n[9],21,-343485551),e[0]=t(l,e[0]),e[1]=t(o,e[1]),e[2]=t(c,e[2]),e[3]=t(h,e[3])}function l(t){const e=[];for(let i=0;i<64;i+=4)e[i>>2]=t.charCodeAt(i)+(t.charCodeAt(i+1)<<8)+(t.charCodeAt(i+2)<<16)+(t.charCodeAt(i+3)<<24);return e}const o="0123456789abcdef".split("");function c(t){let e="",i=0;for(;i<4;i++)e+=o[t>>8*i+4&15]+o[t>>8*i&15];return e}const h=t=>function(t){for(let e=0;e<t.length;e++)t[e]=c(t[e]);return t.join("")}(function(t){const e=t.length,i=[1732584193,-271733879,-1732584194,271733878];let a;for(a=64;a<=t.length;a+=64)n(i,l(t.slice(a-64,a)));t=t.slice(Math.max(0,a-64));const r=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];for(a=0;a<t.length;a++)r[a>>2]|=t.charCodeAt(a)<<(a%4<<3);if(r[a>>2]|=128<<(a%4<<3),a>55)for(n(i,r),a=0;a<16;a++)r[a]=0;return r[14]=8*e,n(i,r),i}(t));class g{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!t)throw new Error("No image element provided.");this.element=t,this.settings={size:80,fallbackImage:"data:image/svg+xml,%3Csvg width='60' xmlns='http://www.w3.org/2000/svg' height='60' viewBox='0 0 60 60'%3E%3Cpath fill='%23bcc7ce' d='M0 0h60v60h-60z'/%3E%3Cg fill-rule='evenodd'%3E%3Cpath fill='%23a4b1b9' d='M30.1 54.8c-6.7 0-13.1-2.8-17.6-7.7l-.5-.5v-2.6h.2c.4-4 1.6-6.7 3.4-7.6 1.3-.6 2.9-1.1 4.9-1.6v-1l1-.3s.7-.2 1.7-.5c0-.5-.1-.7-.1-.9-.6-1-1.5-3.3-2.1-6l-1.7-1.4.2-.9s.2-.9 0-1.9c-.2-.9.1-1.5.3-1.8.3-.3.6-.5 1-.6.3-1.6.9-3.1 1.7-4.3-1.3-1.5-1.7-2.6-1.5-3.5.2-.9 1-1.5 1.9-1.5.7 0 1.3.3 1.9.6.3-.7.9-1.1 1.7-1.1.7 0 1.4.4 2.4.8.5.3 1.2.6 1.6.7 3.4.1 7.6 2.2 8.9 7.6.3.1.6.3.8.5.4.5.5 1.1.3 1.9-.2 1.2 0 2.4 0 2.4l.2.8-1.2 1.2c-.5 2.8-1.6 5.4-2.2 6.5-.1.1-.1.4-.1.8 1 .3 1.7.5 1.7.5l1 .4v.8c2.5.5 4.6 1.1 6.1 1.9 1.8.9 2.9 3.5 3.4 7.8l.1.6-.4.5c-4.6 5.9-11.5 9.4-19 9.4z'/%3E%3Cpath fill='%23fff' d='M45.4 36.8c-1.5-.8-3.9-1.5-7-2v-.9s-1-.4-2.6-.7c-.2-.8-.3-2 .2-2.8.5-.9 1.7-3.6 2.1-6.5l.9-.9s-.3-1.4 0-3c.2-.9-.4-.7-.9-.5-.9-7.1-6.3-7.7-7.8-7.7-1.4-.2-3.9-2.2-4.1-1.3-.1.9 1.2 1.8-.4 1.4-1.6-.4-3.1-1.8-3.3-.8-.2.7 1.2 2.3 2 3.1-1.2 1.3-2.1 3.2-2.4 6.1-.5-.3-1.4-.7-1.1.2.3 1.3 0 2.6 0 2.6l1.4 1.2c.5 2.7 1.5 5.1 2 6 .5.8.3 2.1.2 2.8-1.5.3-2.6.7-2.6.7v1.2c-2.5.5-4.4 1.1-5.8 1.7-2 1-2.6 5.7-2.7 7.9v.4c4.1 4.4 10 7.2 16.5 7.2 7.3 0 13.7-3.5 17.8-8.8-.1-2.3-.8-5.7-2.4-6.6z'/%3E%3C/g%3E%3C/svg%3E",setSourceCallback:()=>{},primarySource:"",initials:"",color:"#888888",background:"#f4f6f7",fontSize:0,fontWeight:100,fontFamily:"'Lato', 'Lato-Regular', 'Helvetica Neue'",offsetX:void 0,offsetY:void 0,width:void 0,height:void 0,useGravatar:!0,useGravatarFallback:!1,hash:"",email:"",fallback:"mm",rating:"x",forcedefault:!1,githubId:0,...e};let i=this.settings.fallbackImage;this.settings.primarySource?i=this.settings.primarySource:this.settings.useGravatar&&this.settings.useGravatarFallback?i=g.gravatarUrl(this.settings):this.settings.useGravatar?this.gravatarValid():this.settings.githubId?i=g.githubAvatar(this.settings):this.settings.initials.length>0&&(i=g.initialAvatar(this.settings)),this.setSource(i)}static from(t,e){return new g(t,e)}setSource(t){if(!this.element)throw new Error("No image element set.");t&&(this.element.src=t,this.settings.setSourceCallback(t))}gravatarValid(){if(!this.settings.email&&!this.settings.hash)return;const t=this.settings.email?h(this.settings.email):this.settings.hash,e=new window.Image;e.addEventListener("load",this.gravatarValidOnLoad.bind(this)),e.addEventListener("error",this.gravatarValidOnError.bind(this)),e.src=`https://secure.gravatar.com/avatar/${t}?d=404`}gravatarValidOnLoad(){this.setSource(g.gravatarUrl(this.settings))}gravatarValidOnError(){this.settings.initials.length>0?this.setSource(g.initialAvatar(this.settings)):this.setSource(this.settings.fallbackImage)}static initialAvatar(t){let e;try{e=document.createElement("canvas")}catch(t){return console.error("Canvas related error:",t),""}const i=t.width?t.width:t.size,a=t.height?t.height:t.size,r=Math.max(window.devicePixelRatio,1);e.width=i*r,e.height=a*r,e.style.width=`${i}px`,e.style.height=`${a}px`;const s=e.getContext("2d");if(!s)return console.error("Canvas context error."),"";const n=t.offsetX?t.offsetX:i/2,l=t.offsetY?t.offsetY:a/2;return s.scale(r,r),s.rect(0,0,e.width,e.height),s.fillStyle=t.background,s.fill(),s.font=`${t.fontWeight} ${t.fontSize||a/2}px ${t.fontFamily}`,s.textAlign="center",s.textBaseline="middle",s.fillStyle=t.color,s.fillText(t.initials,n,l),e.toDataURL("image/png")}static gravatarUrl(t){let{size:e=80,email:i="",hash:a="",fallback:r="mm",rating:s="x",forcedefault:n=!1}=t;e=e&&e>=1&&e<=2048?e:80;let l=a||i;l=l.toLowerCase().trim(),l&&"string"==typeof l||(l="00000000000000000000000000000000"),a=l.includes("@")?h(l):l;return`https://secure.gravatar.com/avatar/${a}?s=${e}&d=${r?encodeURIComponent(r):"mm"}&r=${s||"x"}${n?"&f=y":""}`}static githubAvatar(t){let{githubId:e=0,size:i=80}=t;return`https://avatars.githubusercontent.com/u/${e}?s=${i}&v=4`}}return g}();

esm/index.js

 /* eslint-disable node/no-unpublished-import, node/no-unsupported-features/es-syntax, import/extensions */
 import Avatar from '../src/avatar.js';
 
+export { default as AvatarComponent } from './AvatarComponent.js';
+
 export default Avatar;

package.json

 {
   "name": "avatar-initials",
-  "version": "5.0.1",
+  "version": "6.0.0",
   "description": "JavaScript library for showing Gravatars or generating user avatars from initials.",
@@ -29,2 +29,8 @@ "author": "Matthew Callis <[e-mail]>",
   ],
+  "exports": {
+    ".": {
+      "require": "./src/avatar.js",
+      "import": "./esm/index.js"
+    }
+  },
   "homepage": "http://matthewcallis.github.io/avatar/",
@@ -47,13 +53,19 @@ "repository": {
   },
+  "optionalDependencies": {
+    "@types/react": "^18",
+    "react": "^18",
+    "react-dom": "^18"
+  },
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^24.0.0",
-    "@rollup/plugin-terser": "^0.3.0",
-    "@typescript-eslint/parser": "^5.48.2",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@typescript-eslint/parser": "^5.49.0",
     "ava": "^5.1.1",
-    "browser-env": "^2.0.21",
+    "browser-env": "^3.3.0",
+    "c8": "^7.12.0",
     "canvas": "^2.11.0",
     "core-js": "^3.27.2",
-    "eslint": "^8.32.0",
+    "eslint": "^8.33.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -63,19 +75,17 @@ "eslint-plugin-anti-trojan-source": "^1.1.1",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsdoc": "^39.6.7",
+    "eslint-plugin-jsdoc": "^39.7.4",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-no-inferred-method-name": "^2.0.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-optimize-regex": "^1.2.1",
-    "eslint-plugin-ramda": "^2.5.1",
-    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-security": "^1.6.0",
+    "eslint-plugin-security": "^1.7.0",
     "eslint-plugin-xss": "^0.1.12",
-    "jsdom": "^21.0.0",
+    "jsdom": "^21.1.0",
     "nock": "^13.3.0",
-    "nyc": "^15.1.0",
     "precommit-hook-eslint": "^3.0.0",
     "release-it": "^15.6.0",
-    "rollup": "^3.10.0",
+    "rollup": "^3.12.0",
     "sinon": "^15.0.1",
+    "ts-jest": "^29.0.5",
     "typescript": "^4.9.4"
@@ -98,5 +108,3 @@ },
     "release": "release-it",
-    "report": "nyc report --reporter=html",
-    "test-watch": "npm test -- --watch",
-    "test": "NODE_ENV=test nyc ava",
+    "test": "NODE_ENV=test c8 ava",
     "validate": "npm ls"
@@ -108,7 +116,4 @@ },
     ],
-    "ignoredByWatcher": [
-      "!src/**/*.js"
-    ],
     "cache": false,
-    "concurrency": 5,
+    "concurrency": 1,
     "failFast": false,
@@ -122,8 +127,9 @@ "tap": false,
   },
-  "nyc": {
-    "cache": true,
+  "c8": {
+    "cache": false,
     "all": true,
     "check-coverage": false,
     "include": [
-      "src/avatar.js"
+      "src/avatar.js",
+      "esm/AvatarComponent.js"
     ]
@@ -130,0 +136,0 @@ },

README.md

@@ -12,3 +12,3 @@ [![view on npm](https://img.shields.io/npm/v/avatar-initials.svg)](https://www.npmjs.org/package/avatar-initials)
 
-Avatar is a JavaScript library for showing [Gravatars](https://en.gravatar.com/) or generating user avatars.
+Avatar is a JavaScript library & React component for showing [Gravatars](https://en.gravatar.com/) or generating user avatars.
 
@@ -22,3 +22,3 @@ ## Examples
 // or
-const Avatar = require('avatar-initials')
+const Avatar = require('avatar-initials');
 
@@ -58,2 +58,30 @@ // Add an avatar to an <img>
 
+A simple React example:
+
+```jsx
+import { AvatarComponent } from 'avatar-initials';
+
+export default function Example() {
+  // ...
+  return (
+    <div className={`w-full flex self-center items-center justify-between relative ${classes}`}>
+      <button type="button" onClick={() => setShowMenu(true)} title="Open Menu">
+        <AvatarComponent
+          classes="rounded-full"
+          useGravatar={false}
+          size={44}
+          primarySource={currentUser.Avatar}
+          color="#000000"
+          background="#f1f1f1"
+          fontSize={16}
+          fontWeight={400}
+          offsetY={24}
+          initials={`${currentUser.FirstName[0]}${currentUser.LastName[0]}`}
+        />
+      </button>
+    </div>
+  );
+}
+```
+
 ### Options
@@ -65,16 +93,22 @@
 {
-  useGravatar: true,       // Allow Gravatars or not.
-  fallbackImage: '',       // URL or Data URI used when no initials are provided and not using Gravatars.
-  size: 80,                // Size in pixels, fallback for hidden images and Gravatar
-  setSourceCallback: null, // Callback called when image source is set (useful to cache avatar sources provided by third parties such as Gravatar)
+  primarySource: '',           // A source image to be used by default before attempting any other sources.
+  fallbackImage: '',           // URL or Data URI used when no initials are provided and not using Gravatars.
+  size: 80,                    // Size in pixels, fallback for hidden images and Gravatar
+  setSourceCallback: () => {}, // Callback called when image source is set (useful to cache avatar sources provided by third parties such as Gravatar)
 
   // Initial Avatars Specific
-  initials: '',          // Initials to be used.
-  initial_fg: '#888888', // Text Color
-  initial_bg: '#f4f6f7', // Background Color
-  initial_size: 0,       // Text Size in pixels
-  initial_weight: 100,   // Font weight (numeric value for light, bold, etc.)
-  initial_font_family: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
+  initials: '',          // Initials to be used
+  color: '#888888',      // Text Color
+  background: '#f4f6f7', // Background Color
+  fontSize: 0,           // Text Size in pixels
+  fontWeight: 100,       // Font weight (numeric value for light, bold, etc.)
+  fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
+  offsetX: undefined,    // Text X position in pixels, defaults to: width / 2
+  offsetY: undefined,    // Text Y position in pixels, defaults to: height / 2
+  width: undefined,      // The width of the output image, size is used it not provided
+  height: undefined,     // The height of the output image, size is used if not provided
 
   // Gravatar Specific
+  useGravatar: true,            // Allow Gravatars as source
+  useGravatarFallback: false,   // Use Gravatars fallback, not fallbackImage
   hash: '',                     // Precalculated MD5 string of an email address
@@ -85,6 +119,5 @@ email: '',                    // Email used for the Gravatar
   forcedefault: false,          // Force Gravatar Defaults
-  allowGravatarFallback: false, // Use Gravatars fallback, not fallbackImage
 
   // GitHub Specific
-  github_id: null,  // GitHub User ID.
+  githubId: null,  // GitHub User ID.
 }
@@ -120,3 +153,3 @@ ```
 
-### jQuery Support
+### jQuery Wrapper for Avatar
 
@@ -127,3 +160,2 @@ ```javascript
     return this.each(() => {
-      /* istanbul ignore else */
       if (!jQuery.data(this, 'plugin_avatar')) {
@@ -137,2 +169,16 @@ jQuery.data(this, 'plugin_avatar', new Avatar(this, options));
 
+## Migrating to v6
+
+The settings have changed keys and some new logic was introduced, the logic should not interefere but the keys will need to be updated:
+
+```md
+  initial_fg            => color
+  initial_bg            => background
+  initial_size          => fontSize
+  initial_weight        => fontWeight
+  initial_font_family   => fontFamily
+  allowGravatarFallback => useGravatarFallback
+  github_id             => github_id
+```
+
 ## Thanks
@@ -139,0 +185,0 @@

src/avatar.js

@@ -25,19 +25,27 @@ const md5 = require('./md5');
     this.settings = {
+      size: 80,
+      fallbackImage: "data:image/svg+xml,%3Csvg width='60' xmlns='http://www.w3.org/2000/svg' height='60' viewBox='0 0 60 60'%3E%3Cpath fill='%23bcc7ce' d='M0 0h60v60h-60z'/%3E%3Cg fill-rule='evenodd'%3E%3Cpath fill='%23a4b1b9' d='M30.1 54.8c-6.7 0-13.1-2.8-17.6-7.7l-.5-.5v-2.6h.2c.4-4 1.6-6.7 3.4-7.6 1.3-.6 2.9-1.1 4.9-1.6v-1l1-.3s.7-.2 1.7-.5c0-.5-.1-.7-.1-.9-.6-1-1.5-3.3-2.1-6l-1.7-1.4.2-.9s.2-.9 0-1.9c-.2-.9.1-1.5.3-1.8.3-.3.6-.5 1-.6.3-1.6.9-3.1 1.7-4.3-1.3-1.5-1.7-2.6-1.5-3.5.2-.9 1-1.5 1.9-1.5.7 0 1.3.3 1.9.6.3-.7.9-1.1 1.7-1.1.7 0 1.4.4 2.4.8.5.3 1.2.6 1.6.7 3.4.1 7.6 2.2 8.9 7.6.3.1.6.3.8.5.4.5.5 1.1.3 1.9-.2 1.2 0 2.4 0 2.4l.2.8-1.2 1.2c-.5 2.8-1.6 5.4-2.2 6.5-.1.1-.1.4-.1.8 1 .3 1.7.5 1.7.5l1 .4v.8c2.5.5 4.6 1.1 6.1 1.9 1.8.9 2.9 3.5 3.4 7.8l.1.6-.4.5c-4.6 5.9-11.5 9.4-19 9.4z'/%3E%3Cpath fill='%23fff' d='M45.4 36.8c-1.5-.8-3.9-1.5-7-2v-.9s-1-.4-2.6-.7c-.2-.8-.3-2 .2-2.8.5-.9 1.7-3.6 2.1-6.5l.9-.9s-.3-1.4 0-3c.2-.9-.4-.7-.9-.5-.9-7.1-6.3-7.7-7.8-7.7-1.4-.2-3.9-2.2-4.1-1.3-.1.9 1.2 1.8-.4 1.4-1.6-.4-3.1-1.8-3.3-.8-.2.7 1.2 2.3 2 3.1-1.2 1.3-2.1 3.2-2.4 6.1-.5-.3-1.4-.7-1.1.2.3 1.3 0 2.6 0 2.6l1.4 1.2c.5 2.7 1.5 5.1 2 6 .5.8.3 2.1.2 2.8-1.5.3-2.6.7-2.6.7v1.2c-2.5.5-4.4 1.1-5.8 1.7-2 1-2.6 5.7-2.7 7.9v.4c4.1 4.4 10 7.2 16.5 7.2 7.3 0 13.7-3.5 17.8-8.8-.1-2.3-.8-5.7-2.4-6.6z'/%3E%3C/g%3E%3C/svg%3E",
+      setSourceCallback: () => {},
+      primarySource: '',
+      // Initial Specific
+      initials: '',
+      color: '#888888',
+      background: '#f4f6f7',
+      fontSize: 0,
+      fontWeight: 100,
+      fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
+      offsetX: undefined,
+      offsetY: undefined,
+      width: undefined,
+      height: undefined,
+      // Gravatar Specific
       useGravatar: true,
-      allowGravatarFallback: false,
-      initials: '',
-      initial_fg: '#888888',
-      initial_bg: '#f4f6f7',
-      initial_size: 0,
-      initial_weight: 100,
-      initial_font_family: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
+      useGravatarFallback: false,
       hash: '',
       email: '',
-      size: 80,
       fallback: 'mm',
       rating: 'x',
       forcedefault: false,
-      fallbackImage: "data:image/svg+xml,%3Csvg width='60' xmlns='http://www.w3.org/2000/svg' height='60' viewBox='0 0 60 60'%3E%3Cpath fill='%23bcc7ce' d='M0 0h60v60h-60z'/%3E%3Cg fill-rule='evenodd'%3E%3Cpath fill='%23a4b1b9' d='M30.1 54.8c-6.7 0-13.1-2.8-17.6-7.7l-.5-.5v-2.6h.2c.4-4 1.6-6.7 3.4-7.6 1.3-.6 2.9-1.1 4.9-1.6v-1l1-.3s.7-.2 1.7-.5c0-.5-.1-.7-.1-.9-.6-1-1.5-3.3-2.1-6l-1.7-1.4.2-.9s.2-.9 0-1.9c-.2-.9.1-1.5.3-1.8.3-.3.6-.5 1-.6.3-1.6.9-3.1 1.7-4.3-1.3-1.5-1.7-2.6-1.5-3.5.2-.9 1-1.5 1.9-1.5.7 0 1.3.3 1.9.6.3-.7.9-1.1 1.7-1.1.7 0 1.4.4 2.4.8.5.3 1.2.6 1.6.7 3.4.1 7.6 2.2 8.9 7.6.3.1.6.3.8.5.4.5.5 1.1.3 1.9-.2 1.2 0 2.4 0 2.4l.2.8-1.2 1.2c-.5 2.8-1.6 5.4-2.2 6.5-.1.1-.1.4-.1.8 1 .3 1.7.5 1.7.5l1 .4v.8c2.5.5 4.6 1.1 6.1 1.9 1.8.9 2.9 3.5 3.4 7.8l.1.6-.4.5c-4.6 5.9-11.5 9.4-19 9.4z'/%3E%3Cpath fill='%23fff' d='M45.4 36.8c-1.5-.8-3.9-1.5-7-2v-.9s-1-.4-2.6-.7c-.2-.8-.3-2 .2-2.8.5-.9 1.7-3.6 2.1-6.5l.9-.9s-.3-1.4 0-3c.2-.9-.4-.7-.9-.5-.9-7.1-6.3-7.7-7.8-7.7-1.4-.2-3.9-2.2-4.1-1.3-.1.9 1.2 1.8-.4 1.4-1.6-.4-3.1-1.8-3.3-.8-.2.7 1.2 2.3 2 3.1-1.2 1.3-2.1 3.2-2.4 6.1-.5-.3-1.4-.7-1.1.2.3 1.3 0 2.6 0 2.6l1.4 1.2c.5 2.7 1.5 5.1 2 6 .5.8.3 2.1.2 2.8-1.5.3-2.6.7-2.6.7v1.2c-2.5.5-4.4 1.1-5.8 1.7-2 1-2.6 5.7-2.7 7.9v.4c4.1 4.4 10 7.2 16.5 7.2 7.3 0 13.7-3.5 17.8-8.8-.1-2.3-.8-5.7-2.4-6.6z'/%3E%3C/g%3E%3C/svg%3E",
-      github_id: 0,
-      setSourceCallback: () => {},
+      // Github Specific
+      githubId: 0,
       ...options,
@@ -47,7 +55,9 @@ };
     let source = this.settings.fallbackImage;
-    if (this.settings.useGravatar && this.settings.allowGravatarFallback) {
+    if (this.settings.primarySource) {
+      source = this.settings.primarySource;
+    } else if (this.settings.useGravatar && this.settings.useGravatarFallback) {
       source = Avatar.gravatarUrl(this.settings);
     } else if (this.settings.useGravatar) {
       this.gravatarValid();
-    } else if (this.settings.github_id) {
+    } else if (this.settings.githubId) {
       source = Avatar.githubAvatar(this.settings);
@@ -66,8 +76,7 @@ } else if (this.settings.initials.length > 0) {
    * @param {HTMLImageElement} element The image node to target.
-   * @param {object} options Settings
+   * @param {object} settings Settings
    * @returns {Avatar} The new instance
-   * @memberof Avatar
    */
-  static from(element, options) {
-    return new Avatar(element, options);
+  static from(element, settings) {
+    return new Avatar(element, settings);
   }
@@ -79,3 +88,2 @@
    * @param {string} source The source to set to `src`.
-   * @memberof Avatar
    */
@@ -94,4 +102,2 @@ setSource(source) {
    * Attempts to create an image node with a Gravatar URL using the existing settings.
-   *
-   * @memberof Avatar
    */
@@ -126,15 +132,27 @@ gravatarValid() {
    * @param {number} settings.size The width & height of the output image
-   * @param {string} settings.initials Initials to be used.
-   * @param {string} settings.initial_bg Text Color
-   * @param {string} settings.initial_fg Text Color
-   * @param {number} settings.initial_size Text Size in pixels
-   * @param {number} settings.initial_weight Font weight (numeric value for light, bold, etc.)
-   * @param {string} settings.initial_font_family Font familt to use for the initials
-   * @returns {string} A Base64 Data URL string with a PNG image representation of the avatar.
-   * @memberof Avatar
+   * @param {number|undefined} settings.width The width of the output image
+   * @param {number|undefined} settings.height The height of the output image
+   * @param {string} settings.initials Initials to be used
+   * @param {string} settings.background Avatar Background Color
+   * @param {string} settings.color Avatar Text Color
+   * @param {number} settings.fontSize Text Size in pixels
+   * @param {number} settings.fontWeight Font weight (numeric value for light, bold, etc.)
+   * @param {string} settings.fontFamily Font family to use for the initials
+   * @param {number} [settings.offsetX] Text X position in pixels, defaults to: width / 2
+   * @param {number} [settings.offsetY] Text Y position in pixels, defaults to: height / 2
+   * @returns {string} A Base64 Data URL string with a PNG image representation of the avatar or an empty string.
    */
   static initialAvatar(settings) {
-    const canvas = document.createElement('canvas');
-    const width = settings.size;
-    const height = settings.size;
+    let canvas;
+    /* c8 ignore start */
+    try {
+      canvas = document.createElement('canvas');
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Canvas related error:', error);
+      return '';
+    }
+    /* c8 ignore end */
+    const width = settings.width ? settings.width : settings.size;
+    const height = settings.height ? settings.height : settings.size;
     const devicePixelRatio = Math.max(window.devicePixelRatio, 1);
@@ -147,13 +165,25 @@ canvas.width = width * devicePixelRatio;
     const context = canvas.getContext('2d');
+    // If the context is not avaliable for some reason, return early.
+    /* c8 ignore start */
+    if (!context) {
+      // eslint-disable-next-line no-console
+      console.error('Canvas context error.');
+      return '';
+    }
+    /* c8 ignore end */
+
+    const x = settings.offsetX ? settings.offsetX : (width / 2);
+    const y = settings.offsetY ? settings.offsetY : (height / 2);
+
     context.scale(devicePixelRatio, devicePixelRatio);
     context.rect(0, 0, canvas.width, canvas.height);
-    context.fillStyle = settings.initial_bg;
+    context.fillStyle = settings.background;
     context.fill();
-    context.font = `${settings.initial_weight} ${settings.initial_size || height / 2}px ${settings.initial_font_family}`;
+    context.font = `${settings.fontWeight} ${settings.fontSize || height / 2}px ${settings.fontFamily}`;
     context.textAlign = 'center';
     context.textBaseline = 'middle';
-    context.fillStyle = settings.initial_fg;
-    context.fillText(settings.initials, (width / 2), (height / 2));
+    context.fillStyle = settings.color;
+    context.fillText(settings.initials, x, y);
 
-    /* istanbul ignore next */
+    /* c8 ignore next */
     return canvas.toDataURL('image/png');
@@ -166,26 +196,25 @@ }
    * @static
-   * @param {object} [settings={}] Settings
-   * @param {number} [settings.size=80] The image resolution width & height
-   * @param {string} [settings.email] The email for the Gravatar hash
-   * @param {string} [settings.hash] The Gravatar hash
-   * @param {string} [settings.fallback=mm] The Gravatar fallback setting
-   * @param {string} [settings.rating=x] The Gravatar rating setting
-   * @param {boolean} [settings.forcedefault] The Gravatar forcedefault setting
+   * @param {object} settings Settings
+   * @param {number} settings.size The image resolution (width & height), defaults to 80
+   * @param {string} settings.email The email for the Gravatar hash
+   * @param {string} settings.hash The Gravatar hash
+   * @param {string} settings.fallback The Gravatar fallback setting, defaults to `mm`
+   * @param {string} settings.rating The Gravatar rating setting, defaults to `x`
+   * @param {boolean} settings.forcedefault The Gravatar forcedefault setting
    * @returns {string} A URL to a Gravatar avatar
-   * @memberof Avatar
    */
-  static gravatarUrl(settings = {}) {
-    const size = settings.size && (settings.size >= 1 && settings.size <= 2048) ? settings.size : 80;
-    let email_or_hash = settings.hash || settings.email;
+  static gravatarUrl({ size = 80, email = '', hash = '', fallback = 'mm', rating = 'x', forcedefault = false }) {
+    size = size && (size >= 1 && size <= 2048) ? size : 80;
+    let email_or_hash = hash || email;
+    email_or_hash = email_or_hash.toLowerCase().trim();
     if (!email_or_hash || typeof email_or_hash !== 'string') {
       email_or_hash = '00000000000000000000000000000000';
     }
-    email_or_hash = email_or_hash.toLowerCase().trim();
 
-    const hash = email_or_hash.match(/@/g) !== null ? md5(email_or_hash) : email_or_hash;
-    const fallback = settings.fallback ? encodeURIComponent(settings.fallback) : 'mm';
-    const rating = settings.rating || 'x';
-    const forcedefault = settings.forcedefault ? '&f=y' : '';
+    hash = email_or_hash.includes('@') ? md5(email_or_hash) : email_or_hash;
+    const d = fallback ? encodeURIComponent(fallback) : 'mm';
+    const r = rating || 'x';
+    const force = forcedefault ? '&f=y' : '';
 
-    return `https://secure.gravatar.com/avatar/${hash}?s=${size}&d=${fallback}&r=${rating}${forcedefault}`;
+    return `https://secure.gravatar.com/avatar/${hash}?s=${size}&d=${d}&r=${r}${force}`;
   }
@@ -197,10 +226,9 @@
    * @static
-   * @param {object} [settings={}] Settings
-   * @param {number|string} [settings.github_id=0] The GitHub User ID
-   * @param {number} [settings.size=80] The image resolution width & height
+   * @param {object} settings Settings
+   * @param {number|string} settings.githubId The GitHub User ID
+   * @param {number} settings.size The image resolution width & height
    * @returns {string} A URL to a GitHub avatar
-   * @memberof Avatar
    */
-  static githubAvatar(settings = {}) {
-    return `https://avatars.githubusercontent.com/u/${settings.github_id || 0}?s=${settings.size || 80}&v=4`;
+  static githubAvatar({ githubId = 0, size = 80 }) {
+    return `https://avatars.githubusercontent.com/u/${githubId}?s=${size}&v=4`;
   }
@@ -207,0 +235,0 @@ }

types/index.d.ts

@@ -1,38 +0,253 @@
-declare module "md5" {
-    export = md5;
-    function md5(s: any): any;
+/* eslint-disable no-unused-vars, node/no-unsupported-features/es-syntax, import/no-extraneous-dependencies */
+declare module 'md5' {
+  export function md5(s: any): any;
 }
-declare module "avatar-initials" {
-    export = Avatar;
-    class Avatar {
-        static from(element: HTMLImageElement, options: object): Avatar;
-        static initialAvatar(settings: {
-            size: number;
-            initials: string;
-            initial_bg: string;
-            initial_fg: string;
-            initial_size: number;
-            initial_weight: number;
-            initial_font_family: string;
-        }): string;
-        static gravatarUrl(settings?: {
-            size?: number;
-            email?: string;
-            hash?: string;
-            fallback?: string;
-            rating?: string;
-            forcedefault?: boolean;
-        }): string;
-        static githubAvatar(settings?: {
-            github_id?: number | string;
-            size?: number;
-        }): string;
-        constructor(element: HTMLImageElement, options?: object);
-        element: HTMLImageElement;
-        settings: any;
-        setSource(source: string): void;
-        gravatarValid(): void;
-        gravatarValidOnLoad(): void;
-        gravatarValidOnError(): void;
+declare module 'avatar-initials' {
+  import * as React from 'react';
+
+  /**
+   * Avatar is a JavaScript library for showing Gravatars or generating user avatars.
+   *
+   * @property {HTMLImageElement} element The image DOM node
+   * @property {object} settings Settings
+   * @class
+   */
+  export default class Avatar {
+    /**
+     * Return an Avatar instance.
+     *
+     * @static
+     * @param {HTMLImageElement} element The image node to target
+     * @param {object} settings Settings
+     * @returns {Avatar} The new instance
+     */
+    static from(element: HTMLImageElement, settings: object): Avatar;
+
+    /**
+     * Creates an avatar from
+     *
+     * @param {object} settings Settings
+     * @param {number} settings.size The width & height of the output image
+     * @param {number|undefined} settings.width The width of the output image
+     * @param {number|undefined} settings.height The height of the output image
+     * @param {string} settings.initials Initials to be used
+     * @param {string} settings.background Avatar Background Color
+     * @param {string} settings.color Avatar Text Color
+     * @param {number} settings.fontSize Text Size in pixels
+     * @param {number} settings.fontWeight Font weight (numeric value for light, bold, etc.)
+     * @param {string} settings.fontFamily Font family to use for the initials
+     * @param {number} [settings.offsetX] Text X position in pixels, defaults to: width / 2
+     * @param {number} [settings.offsetY] Text Y position in pixels, defaults to: height / 2
+     * @returns {string} A Base64 Data URL string with a PNG image representation of the avatar or an empty string.
+     */
+    static initialAvatar(settings: {
+      /** The width & height of the output image */
+      size: number;
+      /** The width of the output image */
+      width?: number;
+      /** The height of the output image */
+      height?: number;
+      /** Initials to be used */
+      initials: string;
+      /** Avatar Background Color */
+      background: string;
+      /** Avatar Text Color */
+      color: string;
+      /** Text Size in pixels */
+      fontSize: number;
+      /** Font weight (numeric value for light, bold, etc.) */
+      fontWeight: number;
+      /** Font family to use for the initials */
+      fontFamily: string;
+      /** Text X position in pixels, defaults to: width / 2 */
+      offsetX?: number;
+      /** Text Y position in pixels, defaults to: height / 2 */
+      offsetY?: number;
+    }): string;
+
+    /**
+     * Build a Gravatar avatar URL.
+     *
+     * @static
+     * @param {object} settings Settings
+     * @param {number} settings.size The image resolution (width & height), defaults to 80
+     * @param {string} settings.email The email for the Gravatar hash
+     * @param {string} settings.hash The Gravatar hash
+     * @param {string} settings.fallback The Gravatar fallback setting, defaults to `mm`
+     * @param {string} settings.rating The Gravatar rating setting, defaults to `x`
+     * @param {boolean} settings.forcedefault The Gravatar forcedefault setting
+     * @returns {string} A URL to a Gravatar avatar
+     */
+    static gravatarUrl({ size, email, hash, fallback, rating, forcedefault }: {
+      /** The image resolution (width & height), defaults to 80 */
+      size?: number;
+      /** The email for the Gravatar hash */
+      email?: string;
+      /** The Gravatar hash */
+      hash?: string;
+      /** The Gravatar fallback setting, defaults to `mm` */
+      fallback?: string;
+      /** The Gravatar rating setting, defaults to `x` */
+      rating?: string;
+      /** The Gravatar forcedefault setting */
+      forcedefault?: boolean;
+    }): string;
+
+    /**
+     * Build a GitHub avatar URL.
+     *
+     * @static
+     * @param {object} settings Settings
+     * @param {number|string} settings.githubId The GitHub User ID
+     * @param {number} settings.size The image resolution width & height
+     * @returns {string} A URL to a GitHub avatar
+     */
+    static githubAvatar({ githubId, size }: {
+      /** The GitHub User ID */
+      githubId: number | string;
+      /** The image resolution (width & height), defaults to 80 */
+      size?: number;
+    }): string;
+
+    /**
+     * Return an Avatar instance.
+     *
+     * @param {HTMLImageElement} element The image node to target.
+     * @param {object} [options={}] Settings
+     * @class
+     */
+    constructor(element: HTMLImageElement, options?: object);
+
+    element: HTMLImageElement;
+
+    settings: any;
+
+    /**
+     * Sets the element `src` attribute.
+     *
+     * @param {string} source The source to set to `src`.
+     */
+    setSource(source: string): void;
+
+    /**
+     * Attempts to create an image node with a Gravatar URL using the existing settings.
+     */
+    gravatarValid(): void;
+
+    gravatarValidOnLoad(): void;
+
+    gravatarValidOnError(): void;
+  }
+
+  /**
+   * A React wrapper for the Avatar library.
+   *
+   * @param {object} props The components props.
+   * @param {string} props.classes Classes applied to the IMG node.
+   * @param {number} props.size The width & height of the image.
+   * @param {number} props.width The width of the image, Intial Avatar specific.
+   * @param {number} props.height The height of the image, Intial Avatar specific.
+   * @param {string} props.fallbackImage When no other sources are found, this will be used as the source.
+   * @param {string} props.alt The alt property of the IMG node.
+   * @param {string} props.title The title property of the IMG node.
+   * @param {string} props.primarySource When provided it will be used above all other sources.
+   * @param {string} props.initials The string to use as the Initials, Intial Avatar specific.
+   * @param {string} props.color The font color to use for the Initials, Intial Avatar specific.
+   * @param {string} props.background The background color to use for the Initials, Intial Avatar specific.
+   * @param {number} props.fontSize The font size to use for the Initials, Intial Avatar specific.
+   * @param {number} props.fontWeight The font weight to use for the Initials, Intial Avatar specific.
+   * @param {string} props.fontFamily The font family to use for the Initials, Intial Avatar specific.
+   * @param {number | undefined} props.offsetX The X offset of the Initials text from the left, default is centered.
+   * @param {number | undefined} props.offsetY The Y ffset of the Initials text from the top, default is centered.
+   * @param {boolean} props.useGravatar When true, a Gravatar will attempt to be used, Gravatar specific.
+   * @param {boolean} props.useGravatarFallback When true, a Gravatar fallback will be used, Gravatar specific.
+   * @param {string} props.hash The MD5 hash to use for the Gavatar, Gravatar specific.
+   * @param {string} props.email The email to use for generating the MD5 hash, Gravatar specific.
+   * @param {string} props.fallback The type of fallback to use, Gravatar specific.
+   * @param {string} props.rating The content rating of the Gravatar, Gravatar specific.
+   * @param {boolean} props.forcedefault When set, force a Gravatar default, Gravatar specific.
+   * @param {number} props.githubId A GitHub ID to use to find the avatar, GitHub specific.
+   * @returns {React.DetailedReactHTMLElement} The AvatarComponent node.
+   */
+  export function AvatarComponent({ classes, useGravatar, useGravatarFallback, initials, color, background, fontSize, fontWeight, fontFamily, offsetX, offsetY, hash, email, size, width, height, fallback, rating, forcedefault, fallbackImage, githubId, alt, title, primarySource }: {
+    /** Classes applied to the IMG node. */
+    classes: string;
+    /** The width & height of the IMG node. */
+    size: number;
+    /** The width of the image, Intial Avatar specific. */
+    width?: number | undefined;
+    /** The height of the image, Intial Avatar specific. */
+    height?: number | undefined;
+    /** When no other sources are found, this will be used as the source. */
+    fallbackImage: string;
+    /** The alt property of the IMG node. */
+    alt: string;
+    /** The title property of the IMG node. */
+    title: string;
+    /** When provided it will be used above all other sources. */
+    primarySource: string;
+    /** The string to use as the Initials, Intial Avatar specific. */
+    initials: string;
+    /** The font color to use for the Initials, Intial Avatar specific. */
+    color: string;
+    /** The background color to use for the Initials, Intial Avatar specific. */
+    background: string;
+    /** The font size to use for the Initials, Intial Avatar specific. */
+    fontSize: number;
+    /** The font weight to use for the Initials, Intial Avatar specific. */
+    fontWeight: number;
+    /** The font family to use for the Initials, Intial Avatar specific. */
+    fontFamily: string;
+    /** The X offset of the Initials text from the left, default is centered. */
+    offsetX: number | undefined;
+    /** The Y ffset of the Initials text from the top, default is centered. */
+    offsetY: number | undefined;
+    /** When true, a Gravatar will attempt to be used, Gravatar specific. */
+    useGravatar: boolean;
+    /** When true, a Gravatar fallback will be used, Gravatar specific. */
+    useGravatarFallback: boolean;
+    /** The MD5 hash to use for the Gavatar, Gravatar specific. */
+    hash: string;
+    /** The email to use for generating the MD5 hash, Gravatar specific. */
+    email: string;
+    /** The type of fallback to use, Gravatar specific. */
+    fallback: string;
+    /** The content rating of the Gravatar, Gravatar specific. */
+    rating: string;
+    /** When set, force a Gravatar default, Gravatar specific. */
+    forcedefault: boolean;
+    /** A GitHub ID to use to find the avatar, GitHub specific. */
+    githubId: number;
+  }): React.DetailedReactHTMLElement;
+
+  namespace AvatarComponent {
+    const displayName: string;
+    namespace defaultProps {
+      const classes: string;
+      const useGravatar: boolean;
+      const useGravatarFallback: boolean;
+      const initials: string;
+      const color: string;
+      const background: string;
+      const fontSize: number;
+      const fontWeight: number;
+      const fontFamily: string;
+      const offsetX: any;
+      const offsetY: any;
+      const hash: string;
+      const email: string;
+      const size: number;
+      const width: any;
+      const height: any;
+      const fallback: string;
+      const rating: string;
+      const forcedefault: boolean;
+      const fallbackImage: string;
+      const githubId: number;
+      const alt: string;
+      const title: string;
+      const primarySource: string;
     }
+  }
 }
+// # sourceMappingURL=index.d.ts.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

65138

increased by109.27%

Dev dependency count

31

decreased by-3.12%

Number of package files

12

increased by33.33%

Lines of code

818

increased by98.06%

Number of lines in readme file

184

increased by33.33%

Worsened metrics

Dependency count

3

increased byInfinity%

Number of low supply chain risk alerts

3

increased by200%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes