diff --git a/src/index.tsx b/src/index.tsx index 3e8ab36..56f9d51 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -22,47 +22,34 @@ export function MechanicalCounter({ // we need to wait until we have the ref // so we can calculate the font height useEffect(() => { - if (isLoaded) { - return void 0; - } - - let isMounted = true; - while (!ref.current && isMounted) {} set(true); - return () => { - isMounted = false; - }; - }, [ref]); + }, []); - const placeholder = ( - - {text} - - ); + const baseStyles = { + height, + lineHeight: typeof height === "string" ? height : `${height}px`, + }; if (!isLoaded) { - return placeholder; + // it's opacity 0 since we only really want to get the ref + // to calculate the font height + return ( +
+ + {text} + +
+ ); } return ( - {placeholder} + + {" "} + {text} + {textArray.map((letter, index) => { const left = stats.slice(0, index).reduce(count, 0);