improve avatar

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reablocks",
-  "version": "5.8.2",
+  "version": "5.8.3",
   "description": "Component library for React",
   "scripts": {
     "build": "vite build --mode library",
@@ -47,6 +47,7 @@
   },
   "homepage": "https://github.com/reaviz/reablocks#readme",
   "dependencies": {
+    "@marko19907/string-to-color": "^1.0.0",
     "@reaviz/react-use-fuzzy": "^1.0.3",
     "chroma-js": "^2.4.2",
     "classnames": "^2.3.1",
@@ -65,8 +66,7 @@
     "react-18-input-autosize": "^3.0.0",
     "react-fast-compare": "^3.2.2",
     "react-highlight-words": "^0.20.0",
-    "react-textarea-autosize": "^8.5.3",
-    "string-to-color": "^2.2.2"
+    "react-textarea-autosize": "^8.5.3"
   },
   "peerDependencies": {
     "react": ">=16",

src/elements/Avatar/Avatar.story.tsx

@@ -18,7 +18,7 @@ Default.args = {
 
 export const RoundedWithImage = Template.bind({});
 RoundedWithImage.args = {
-  src: 'https://lh3.googleusercontent.com/a-/AAuE7mAtQVUnylKNBtevO2lU0S-a4X-nu0IwMIyVl0Qe',
+  src: 'https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg',
   size: 50,
   rounded: true
 };

src/elements/Avatar/Avatar.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import getInitials from 'name-initials';
-import stc from 'string-to-color';
+import { generateColor } from '@marko19907/string-to-color';
 import css from './Avatar.module.css';
 
 export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -29,12 +29,38 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
    * Color override for the avatar.
    */
   color?: string;
+
+  /**
+   * Custom color options for the color generator.
+   */
+  colorOptions?: {
+    saturation: number;
+    lightness: number;
+    alpha: number;
+  };
 }
 
 export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
-  ({ name, src, color, size, rounded, className, ...rest }, ref) => {
+  (
+    { name, src, color, size, rounded, className, colorOptions, ...rest },
+    ref
+  ) => {
     const fontSize = size * 0.4;
 
+    const initials = useMemo(() => getInitials(name), [name]);
+
+    const backgroundColor = useMemo(() => {
+      if (src) {
+        return 'transparent';
+      }
+
+      if (color) {
+        return color;
+      }
+
+      return generateColor(name || '', colorOptions);
+    }, [color, name, src, colorOptions]);
+
     return (
       <div
         {...rest}
@@ -46,11 +72,11 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
           height: `${size}px`,
           fontSize: `${fontSize}px`,
           backgroundImage: src ? `url(${src})` : 'none',
-          backgroundColor: src ? 'transparent' : color || stc(name || '')
+          backgroundColor
         }}
         ref={ref}
       >
-        {!src && name && <span>{getInitials(name)}</span>}
+        {!src && name && <span>{initials}</span>}
       </div>
     );
   }