60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useMemo } from "react";
|
|
import useFillWidthText from "./useFillWidthText";
|
|
import { cls } from "@/lib/utils";
|
|
|
|
type TextElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
|
|
|
|
// Lowercase characters that have descenders (extend below the baseline)
|
|
// Uppercase versions (G, J, P, Q, Y) don't have descenders
|
|
const DESCENDER_CHARS = /[gjpqy]/;
|
|
|
|
// Utility function to check if text has descender characters
|
|
export const hasDescenders = (text: string): boolean => DESCENDER_CHARS.test(text);
|
|
|
|
interface FillWidthTextProps {
|
|
children: string;
|
|
as?: TextElement;
|
|
className?: string;
|
|
}
|
|
|
|
const FillWidthText = ({
|
|
children,
|
|
as: Component = "h1",
|
|
className = "",
|
|
}: FillWidthTextProps) => {
|
|
const { containerRef, textRef, fontSize, isReady } = useFillWidthText(children);
|
|
|
|
// Use tighter line height if text has no descender characters
|
|
const lineHeight = useMemo(() => {
|
|
return DESCENDER_CHARS.test(children) ? 1.2 : 0.8;
|
|
}, [children]);
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
className="w-full min-w-0 flex-1"
|
|
>
|
|
<Component
|
|
ref={textRef as React.RefObject<HTMLHeadingElement & HTMLParagraphElement & HTMLSpanElement>}
|
|
className={cls(
|
|
"whitespace-nowrap transition-opacity duration-150",
|
|
isReady ? "opacity-100" : "opacity-0",
|
|
className
|
|
)}
|
|
style={{
|
|
fontSize: `${fontSize}px`,
|
|
lineHeight,
|
|
}}
|
|
>
|
|
{children}
|
|
</Component>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
FillWidthText.displayName = "FillWidthText";
|
|
|
|
export default React.memo(FillWidthText);
|