I'm using react show more text controller in my spfx webpart using react. i need to replace showMore and showLess string link with ExpandMore and ExpandLess material ui icons in my webpart.is there any method for this?
<ShowMoreText
/* Default options */
lines={2}
more="Show More"
less="Show less"
anchorClass=""
onClick={this.executeOnClick}
expanded={false}
>
{item["description"]}
</ShowMoreText>
I refered this https://npmjs.com/package/react-show-more-text
Pass the <Icon /> directly to related props would work fine.
<ShowMoreText
more={<ExpandMore />}
less={<ExpandLess />}
...
/>
import React, { useState } from "react";
import "./styles.css";
import ShowMoreText from "react-show-more-text";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";
export default function App() {
const [expand, setExpand] = useState(false);
const onClick = () => {
setExpand(!expand);
};
const text = "12313131313131311";
return (
<div className="App">
<ShowMoreText
lines={2}
more={<ExpandMore />}
less={<ExpandLess />}
onClick={onClick}
expanded={expand}
width={30}
>
{text}
</ShowMoreText>
</div>
);
}
