ExpandableText Components

import { Typography } from "@mui/material";
import { useEffect, useRef, useState } from "react"; interface ExpandableTextProps { text: string; extendedText: string; numberOfLine: number;
} const ExpandableText: React.FC<ExpandableTextProps> = ({ text, extendedText = "Description", numberOfLine = 3 }) => { const [expanded, setExpanded] = useState(false); const [maxHeight, setMaxHeight] = useState<string | number>('none'); const contentRef = useRef<HTMLDivElement>(null); useEffect(() => { if (contentRef.current) { setMaxHeight(expanded ? contentRef.current.scrollHeight : `${numberOfLine * 1.5}em`); } }, [expanded, numberOfLine]) const toggleExpand = () => { setExpanded((prev) => !prev); }; return ( <> <div ref={contentRef} style={{ overflow: 'hidden', maxHeight: maxHeight, transition: 'max-height 0.3s ease-in-out', }} > <Typography component="p" sx={{ fontSize: 12, fontWeight: 700, letterSpacing: 0.5, display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: expanded ? 'unset' : numberOfLine, textOverflow: 'ellipsis', mt: 1, }} > {text} </Typography> </div> <span style={{ color: "blue", cursor: "pointer" }} onClick={toggleExpand}> {expanded ? `Collapse ${extendedText}` : `Expand ${extendedText}`} </span> </> );
}; export default ExpandableText;