smoke-indica
commented
3 years ago Open smoke-indica opened 3 years ago
smoke-indica
commented
3 years ago 
WizardsOrb
commented
3 years ago In next.js i had the same issue, so i used hashicon in a function component with useEffect
import React, { useEffect, useRef, ImgHTMLAttributes } from "react";
import { Params, hashicon, HasherType } from "@emeraldpay/hashicon";
export interface Props {
value: string;
size?: number;
hasher?: HasherType;
options?: Params;
style?: React.CSSProperties;
className?: string;
onClick?: React.MouseEventHandler<HTMLImageElement>;
}
const Hashicon: React.FC<Props> = (props) => {
const ref = useRef<ImgHTMLAttributes<HTMLImageElement>>({});
useEffect(() => {
(() => {
let attributes: ImgHTMLAttributes<HTMLImageElement> = {};
let options = {};
if (typeof options !== "undefined") {
options = { ...options, ...props.options };
}
if (typeof props.size === "number") {
options = { ...options, ...{ size: props.size } };
}
if (typeof props.hasher === "string") {
options = { ...options, ...{ hasher: props.hasher } };
}
const icon = hashicon(props.value, options).toDataURL();
ref.current = {
...attributes,
alt: props.value,
width: props.size,
src: icon,
};
})();
}, [props]);
return (
<img
{...ref.current}
onClick={props.onClick}
className={props.className}
style={props.style}
/>
);
};
export default Hashicon;