34 lines
917 B
TypeScript
34 lines
917 B
TypeScript
import * as React from "react";
|
|
|
|
type Options = {
|
|
fontSize?: string;
|
|
lineHeight?: string;
|
|
};
|
|
|
|
/**
|
|
* Measures the width of an emoji character
|
|
*/
|
|
export default function useEmojiWidth(
|
|
emoji: string | undefined,
|
|
{ fontSize = "2.25em", lineHeight = "1.25" }: Options
|
|
) {
|
|
return React.useMemo(() => {
|
|
const element = window.document.createElement("span");
|
|
if (!emoji) {
|
|
return 0;
|
|
}
|
|
|
|
element.innerText = `${emoji}\u00A0`;
|
|
element.style.visibility = "hidden";
|
|
element.style.position = "absolute";
|
|
element.style.left = "-9999px";
|
|
element.style.lineHeight = lineHeight;
|
|
element.style.fontSize = fontSize;
|
|
element.style.width = "max-content";
|
|
window.document.body?.appendChild(element);
|
|
const width = window.getComputedStyle(element).width;
|
|
window.document.body?.removeChild(element);
|
|
return parseInt(width, 10);
|
|
}, [emoji, fontSize, lineHeight]);
|
|
}
|