diff --git a/README.md b/README.md index 2bc816a..d4d6e9a 100644 --- a/README.md +++ b/README.md @@ -23,14 +23,16 @@ import Avatar from 'boring-avatars'; ### Props -| Prop | Type | Default | -|---------|--------------------------------------------------------------|-----------------------------------------------------------| -| size | number or string | `40px` | -| square | boolean | `false` | -| title | boolean | `false` | -| name | string | `Clara Barton` | -| variant | oneOf: `marble`, `beam`, `pixel`,`sunset`, `ring`, `bauhaus` | `marble` | -| colors | array | `['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']` | +| Prop | Type | Default | +|----------------|--------------------------------------------------------------|-----------------------------------------------------------| +| size | number or string | `40px` | +| square | boolean | `false` | +| title | boolean | `false` | +| name | string | `""` | +| variant | oneOf: `marble`, `beam`, `pixel`,`sunset`, `ring`, `bauhaus` | `marble` | +| colors | array | `['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']` | +| random | boolean | `false` | +| randompalette | boolean | `false` | #### Name @@ -68,6 +70,33 @@ The `square` prop is used to make the avatar square. ``` +#### Random +The `random` prop is used to generate the avatar randomly, independent of the name. + +```jsx + +``` + +Or you can leave the name empty. + +```jsx + +``` + +Or you can not use it at all. + +```jsx + +``` + +#### Random Palette + +The `randompalette` prop is used to change the color palette of the avatar with a random color palette. + +```jsx + +``` + ## API service > [!IMPORTANT] diff --git a/index.d.ts b/index.d.ts index bd0ebb5..72fce69 100644 --- a/index.d.ts +++ b/index.d.ts @@ -7,6 +7,8 @@ declare module 'boring-avatars' { square?: boolean; variant?: 'marble' | 'beam' | 'pixel' | 'sunset' | 'ring' | 'bauhaus'; colors?: string[]; + random?: boolean; + randompalette?: boolean; [key: string]: any; // Allows any additional prop } diff --git a/src/demo/playground.js b/src/demo/playground.js index 906400d..0467740 100644 --- a/src/demo/playground.js +++ b/src/demo/playground.js @@ -70,7 +70,7 @@ const Input = styled.input` } `; -const AvatarWrapper = ({ name, playgroundColors, size, square, variant }) => { +const AvatarWrapper = ({ name, playgroundColors, size, square, variant, random }) => { const [avatarName, setAvatarName] = useState(name); const handleFocus = (event) => event.target.select(); const ref = useRef(); @@ -96,6 +96,7 @@ const AvatarWrapper = ({ name, playgroundColors, size, square, variant }) => { size={size} variant={variants[variant]} square={square} + random={random} /> { const [avatarSize, setAvatarSize] = useState(avatarSizes.medium); const [variant, setVariant] = useState(variants.beam); const [isSquare, setSquare] = useState(false); + const [isRandom, setRandom] = useState(false); return ( <> @@ -223,6 +225,7 @@ const Playground = () => { + {Object.entries(avatarSizes).map(([key, value], index) => ( { name={exampleName} playgroundColors={filteredColors} variant={variant} + random={isRandom} /> ))} diff --git a/src/lib/components/avatar-bauhaus.js b/src/lib/components/avatar-bauhaus.js index dea573c..8d032d1 100644 --- a/src/lib/components/avatar-bauhaus.js +++ b/src/lib/components/avatar-bauhaus.js @@ -1,5 +1,6 @@ import * as React from 'react'; -import { hashCode, getUnit, getRandomColor, getBoolean } from '../utilities'; +import palettes from 'nice-color-palettes/1000'; +import { hashCode, getUnit, getRandomColor, getBoolean, getRandomStr, getRandomPalette } from '../utilities'; const ELEMENTS = 4; const SIZE = 80; @@ -20,8 +21,15 @@ function generateColors(name, colors) { } const AvatarBauhaus = (props) => { - const { name, colors, title, square, size, ...otherProps } = props; - const properties = generateColors(name, colors); + const { name, colors, title, square, size, random, randompalette, ...otherProps } = props; + const recalculate = random || !name; + const randomStr = React.useMemo(() => { + return recalculate ? getRandomStr() : ''; + }, [recalculate]); + const randomPlt = React.useMemo(() => { + return randompalette ? getRandomPalette(palettes) : []; + }, [randompalette]); + const properties = generateColors(recalculate ? randomStr : name, randompalette ? randomPlt : colors); const maskID = React.useId(); return ( @@ -34,7 +42,7 @@ const AvatarBauhaus = (props) => { height={size} {...otherProps} > - {title && {name}} + {title && name && {name}} diff --git a/src/lib/components/avatar-beam.js b/src/lib/components/avatar-beam.js index 7363ef5..51d9977 100644 --- a/src/lib/components/avatar-beam.js +++ b/src/lib/components/avatar-beam.js @@ -1,5 +1,6 @@ import * as React from 'react'; -import { hashCode, getUnit, getBoolean, getRandomColor, getContrast } from '../utilities'; +import palettes from 'nice-color-palettes/1000'; +import { hashCode, getUnit, getBoolean, getRandomColor, getContrast, getRandomStr, getRandomPalette } from '../utilities'; const SIZE = 36; @@ -35,8 +36,15 @@ function generateData(name, colors) { } const AvatarBeam = (props) => { - const { name, colors, title, square, size, ...otherProps } = props; - const data = generateData(name, colors); + const { name, colors, title, square, size, random, randompalette, ...otherProps } = props; + const recalculate = random || !name; + const randomStr = React.useMemo(() => { + return recalculate ? getRandomStr() : ''; + }, [recalculate]); + const randomPlt = React.useMemo(() => { + return randompalette ? getRandomPalette(palettes) : []; + }, [randompalette]); + const data = generateData(recalculate ? randomStr : name, randompalette ? randomPlt : colors); const maskID = React.useId(); return ( @@ -49,7 +57,7 @@ const AvatarBeam = (props) => { height={size} {...otherProps} > - {title && {name}} + {title && name && {name}} diff --git a/src/lib/components/avatar-marble.js b/src/lib/components/avatar-marble.js index 3880cc5..de4f31b 100644 --- a/src/lib/components/avatar-marble.js +++ b/src/lib/components/avatar-marble.js @@ -1,5 +1,6 @@ import * as React from 'react'; -import { hashCode, getUnit, getRandomColor } from '../utilities'; +import palettes from 'nice-color-palettes/1000'; +import { hashCode, getUnit, getRandomColor, getRandomStr, getRandomPalette } from '../utilities'; const ELEMENTS = 3; const SIZE = 80; @@ -20,8 +21,15 @@ function generateColors(name, colors) { } const AvatarMarble = (props) => { - const { name, colors, title, square, size, ...otherProps } = props; - const properties = generateColors(name, colors); + const { name, colors, title, square, size, random, randompalette, ...otherProps } = props; + const recalculate = random || !name; + const randomStr = React.useMemo(() => { + return recalculate ? getRandomStr() : ''; + }, [recalculate]); + const randomPlt = React.useMemo(() => { + return randompalette ? getRandomPalette(palettes) : []; + }, [randompalette]); + const properties = generateColors(recalculate ? randomStr : name, randompalette ? randomPlt : colors); const maskID = React.useId(); return ( @@ -34,7 +42,7 @@ const AvatarMarble = (props) => { height={size} {...otherProps} > - {title && {name}} + {title && name && {name}} diff --git a/src/lib/components/avatar-pixel.js b/src/lib/components/avatar-pixel.js index 9b5e716..f02fb24 100644 --- a/src/lib/components/avatar-pixel.js +++ b/src/lib/components/avatar-pixel.js @@ -1,5 +1,6 @@ import * as React from 'react'; -import { hashCode, getRandomColor } from '../utilities'; +import palettes from 'nice-color-palettes/1000'; +import { hashCode, getRandomColor, getRandomStr, getRandomPalette } from '../utilities'; const ELEMENTS = 64; const SIZE = 80; @@ -16,8 +17,15 @@ function generateColors(name, colors) { } const AvatarPixel = (props) => { - const { name, colors, title, square, size, ...otherProps } = props; - const pixelColors = generateColors(name, colors); + const { name, colors, title, square, size, random, randompalette, ...otherProps } = props; + const recalculate = random || !name; + const randomStr = React.useMemo(() => { + return recalculate ? getRandomStr() : ''; + }, [recalculate]); + const randomPlt = React.useMemo(() => { + return randompalette ? getRandomPalette(palettes) : []; + }, [randompalette]); + const pixelColors = generateColors(recalculate ? randomStr : name, randompalette ? randomPlt : colors); const maskID = React.useId(); return ( @@ -30,7 +38,7 @@ const AvatarPixel = (props) => { height={size} {...otherProps} > - {title && {name}} + {title && name && {name}} { - const { name, colors, title, square, size, ...otherProps } = props; - const ringColors = generateColors(colors, name); + const { name, colors, title, square, size, random, randompalette, ...otherProps } = props; + const recalculate = random || !name; + const randomStr = React.useMemo(() => { + return recalculate ? getRandomStr() : ''; + }, [recalculate]); + const randomPlt = React.useMemo(() => { + return randompalette ? getRandomPalette(palettes) : []; + }, [randompalette]); + const ringColors = generateColors(randompalette ? randomPlt : colors, recalculate ? randomStr : name); const maskID = React.useId(); return ( @@ -39,7 +47,7 @@ const AvatarRing = (props) => { height={size} {...otherProps} > - {title && {name}} + {title && name && {name}} diff --git a/src/lib/components/avatar-sunset.js b/src/lib/components/avatar-sunset.js index a7e14e0..d29b916 100644 --- a/src/lib/components/avatar-sunset.js +++ b/src/lib/components/avatar-sunset.js @@ -1,5 +1,6 @@ import * as React from 'react'; -import { hashCode, getRandomColor } from '../utilities'; +import palettes from 'nice-color-palettes/1000'; +import { hashCode, getRandomColor, getRandomStr, getRandomPalette } from '../utilities'; const ELEMENTS = 4; const SIZE = 80; @@ -16,9 +17,15 @@ function generateColors(name, colors) { } const AvatarSunset = (props) => { - const { name, colors, title, square, size, ...otherProps } = props; - const sunsetColors = generateColors(name, colors); - const nameWithoutSpace = name.replace(/\s/g, ''); + const { name, colors, title, square, size, random, randompalette, ...otherProps } = props; + const recalculate = random || !name; + const randomStr = React.useMemo(() => { + return recalculate ? getRandomStr() : ''; + }, [recalculate]); + const randomPlt = React.useMemo(() => { + return randompalette ? getRandomPalette(palettes) : []; + }, [randompalette]); + const sunsetColors = generateColors(recalculate ? randomStr : name, randompalette ? randomPlt : colors); const maskID = React.useId(); return ( @@ -31,17 +38,17 @@ const AvatarSunset = (props) => { height={size} {...otherProps} > - {title && {name}} + {title && name && {name}} - - + + { { const resolvedVariant = DEPRECATED_VARIANTS[variant] || variant; @@ -40,6 +42,8 @@ const Avatar = ({ title={title} size={size} square={square} + random={random} + randompalette={randompalette} {...otherProps} /> ); @@ -51,6 +55,8 @@ Avatar.propTypes = { name: PropTypes.string, square: PropTypes.bool, title: PropTypes.bool, + random: PropTypes.bool, + randompalette: PropTypes.bool, }; export default Avatar; diff --git a/src/lib/utilities.js b/src/lib/utilities.js index 1ac822c..4885204 100644 --- a/src/lib/utilities.js +++ b/src/lib/utilities.js @@ -55,3 +55,16 @@ export const getContrast = (hexcolor) => { return (yiq >= 128) ? '#000000' : '#FFFFFF'; }; + +export const getRandomStr = (length = 6) => { + const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; + let result = ''; + for (let i = 0; i < length; i++) { + result += characters.charAt(Math.floor(Math.random() * characters.length)); + } + return result; +} + +export const getRandomPalette = (palettes) => { + return palettes[Math.floor(Math.random() * palettes.length)]; +}