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;
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)