Expand/Collapse with Ant Typography - antd

Question

Ant Design has a Typography library which is helpful in displaying text. One particularly helpful feature is the ability to "Expand" text. From the Ant documentation, you can display a paragraph as such:
Hitting "Expand" will produce the following:
The issue here, is that after you expand there is no option to "Collapse" the text back to what we had originally, which can be problematic. I have been looking through the Typography documentation here, but there is no mention of the ability to collapse. I was wondering if there was a way to achieve something like a "Collapse" using the Ant Typography library.
Another option that I have considered is the react-text-collapse library, however I am not sure it is a perfect solution.

Answer 1

Looks like ant design doesn't have default option to collapse the typography paragraph. You can request for the feature at ant design github.
However you can achieve it with some state changes.
Here is the sample link
https://codesandbox.io/s/upbeat-jepsen-4h7ek
class Demo extends React.Component {
state = {
expand: false,
counter: 0
};
typoExpand = () => {
this.setState({
expand: true,
counter: !this.state.expand
? this.state.counter + 0
: this.state.counter + 1
});
};
typoClose = () => {
this.setState({
expand: false,
counter: !this.state.expand
? this.state.counter + 0
: this.state.counter + 1
});
};
renderParagraph() {
return (
<div key={this.state.counter}>
<Paragraph
ellipsis={{
rows: 3,
expandable: true,
onExpand: this.typoExpand
}}
>
Ant Design, a design language for background applications, is refined
by Ant UED Team. Ant Design, a design language for background
applications, is refined by Ant UED Team. Ant Design, a design
language for background applications, is refined by Ant UED Team. Ant
Design, a design language for background applications, is refined by
Ant UED Team. Ant Design, a design language for background
applications, is refined by Ant UED Team. Ant Design, a design
language for background applications, is refined by Ant UED Team.
</Paragraph>
</div>
);
}
render() {
return (
<div>
{this.renderParagraph()}
{this.state.expand && <a onClick={this.typoClose}>Close</a>}
</div>
);
}
}

Answer 2

You can just add a state to the target Typography, for example:
const { Paragraph, Text } = Typography;
const App = () => {
const [expandable, setExpandable] = useState(true);
const toggle = () => setExpandable(p => !p);
return (
// v Style the container for your needs
<div>
<Paragraph ellipsis={{ rows: 3, expandable }}>
Ant Design, a design language for background applications, is refined by
Ant UED Team. Ant Design, a design language for background applications,
is refined by Ant UED Team. Ant Design, a design language for background
applications, is refined by Ant UED Team. Ant Design, a design language
for background applications, is refined by Ant UED Team. Ant Design, a
design language for background applications, is refined by Ant UED Team.
Ant Design, a design language for background applications, is refined by
Ant UED Team.
</Paragraph>
<Text code onClick={toggle}>
Expand
</Text>
</div>
);
};
What's left is to style the container (which depends on you), like making a flexbox (antd got Grid implemented) so the Expand action will be "at the end" of the paragraph (and not a block as in the example).