How to use this lib as a react component

[ghost]

Hi, this lib looks fantastic and fast! How do we use this as a react component?
thanks

[laurentpayot]

Thanks @rhacker! I don’t know React super well (I use Elm instead), but I created the following examples on CodePen:

• React function component using Minidenticons custom element: https://codepen.io/laurentpayot/pen/oNEPOww
• React function component directly using Minidenticons identicon function with React dangerouslySetInnerHTML: https://codepen.io/laurentpayot/pen/GRQXaGK

Let me know if it works for you.

[SleepyBoy29]

i think there is some problem in index.html, i tried change import { identiconSvg } from "./minidenticons.min.js" into import { identicon } from "https://unpkg.com/[email protected]/minidenticons.min.js"; and it works, try it out @rhacker

[laurentpayot]

Yet another way is to extend the React.Component class: https://codepen.io/laurentpayot/pen/gOKbaJV

[danyi1212]

It's usually better to include SVG inside <img /> tag using Data URI, especially when the SVG provided as string.
See this stack overflow answer for more info - https://stackoverflow.com/a/58456376/8116615

Here is a complete React component to use this concept:

import { identicon } from "minidenticons"
import React, { ImgHTMLAttributes, useMemo } from "react"

interface IdentityIconProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src"> {
    username: string
    saturation?: string | number
    lightness?: string | number
}

const IdentityIcon: React.FC<IdentityIconProps> = ({ username, saturation, lightness, ...props }) => {
    const svgText = useMemo(() => identicon(username, saturation, lightness), [username, saturation, lightness])
    return <img src={`data:image/svg+xml;utf8,${encodeURIComponent(svgText)}`} alt={username} {...props} />
}

export default IdentityIcon

Then it can be used like so:

<IdentityIcon username="Hello world" width={300} />

[laurentpayot]

Thanks @danyi1212! I’m actually using <img /> data URI with the data:image/svg+xml;utf8, prefix myself in an app. It’s worth mentioning in the docs. I will try to find some time to include your example in the readme.

[laurentpayot]

@danyi1212 I simplified your example from TS to JS and put it in the v3 docs with a link to your original comment. I also created one more CodePen for this:

• React component using img and memoization: https://codepen.io/laurentpayot/pen/RweNNQR