Show more/less text
Opened this issue · 1 comments
jeromecauchon commented
I found a way to show more text but i cannot figured out how to show less text. Once expanded, the textTruncateChild disappear.
const [expanded, setExpanded] = useState(false);
return (
<TextTruncate
line={expanded ? 2000 : props.lines}
element="span"
truncateText="…"
text={props.text}
textTruncateChild={<a onClick={() => {setExpanded(!expanded)}}>{expanded?'less': 'more'}</a>}
/>
);
jeromecauchon commented
This is how i make it work.
const [expanded, setExpanded] = useState(false);
return (
{expanded ? (
<Typography>
{props.text}
<a
href='#'
style={{ color: 'red' }}
onClick={() => {
setExpanded(!expanded);
}}>
{props.readLessText}
</a>
</Typography>
) : (
<TextTruncate
line={props.lines}
truncateText='…'
text={props.text}
textTruncateChild={
<a
href='#'
style={{ color: 'red' }}
onClick={() => {
setExpanded(!expanded);
}}>
{props.readMoreText}
</a>
}
/>
)});