Receive color values

[adelhult]

It would be great if the component could inform its parent about what color it is, very useful for use-cases like this: digitalungdom-se/digitalungdom.se#125

I think it should work like this:

import { useState } from 'react';
import HashedBotIdenticon from '@digitalungdom/bot-identicon';

function Example() {
   const [color, setColor] = useState();
   return <HashedBotIdenticon identifier="Ada Lovelace" setColor={setColor}>;
}

I tried to implement it, However, I'm not used to writing typescript at all and I don't seem to be able to test if my code works in my local env. However, something along these lines might work:

...

export interface HashedBotIdenticonProps extends BotIdenticonProps {
  identifier?: string | number,
  setColor?: (color: [number, number, number] | undefined) => null,
}

export function HashedBotIdenticon({
  identifier,
  face,
  color,
  setColor,
  ...props
}: HashedBotIdenticonProps) {
  let hashedColor: [number, number, number] | undefined = color
  if (setColor != undefined) setColor(hashedColor)
...

[Nautman]

I think perhaps a more clean solution would be to export the actual hashing function. So then you could get the exact same color by importing the below the functions. What do you think of something like that?

Using the setColor could create some dependency troubles in our use case with cards. You would have the BotIdenticon child set a property that a sibling (BackgroundBanner) to that child would depend on. Instead you could simply make the parent determine the color and give that to both the BotIdenticon and BackgroundBanner.

function getHashedColor(identifier: string) : [number, number, number] {
...
}

function getHashedFace(identifier: string) : Face {
...
}

[adelhult]

Sure, that would also work! 👍