i am Limiting the description length in React using a function
const truncateString = (str, num) => { if (str?.length > num) { return str.slice(0, num) + ' ...read more' } else { return str; } }
here i want to edit '...read more' font and want to make it bold and then return with normal sliced string how to do that?
You can return a fragment with the text and a <strong> (or other element you style to make it bold, but remember accessibility if you do). When doing that, it may be best to always return a fragment even if you don't need one:
const truncateString = (str, num) => {
if (str?.length > num) {
return <>{str.slice(0, num)} <strong>...read more</strong></>;
} else {
return <>{str}</>;
}
};
...but you don't technically have to:
const truncateString = (str, num) => {
if (str?.length > num) {
return <>{str.slice(0, num)} <strong>...read more</strong></>;
} else {
return str;
}
};
Example:
const truncateString = (str, num) => {
// Had to remove the optional chaining because the Babel used by
// Stack Snippets is **THAT** old.
if (str && str.length > num) {
// Have to use React.Fragment because the Babel used by
// Stack Snippets is **THAT** old.
return (
<React.Fragment>
{str.slice(0, num)} <strong>...read more</strong>
</React.Fragment>
);
} else {
return <React.Fragment>{str}</React.Fragment>;
}
};
const Example = () => {
return (
<div>
<div>Truncated: {truncateString("abcdefghijklmnopqrstuvwxyz", 10)}</div>
<div>Untruncated: {truncateString("abcde", 10)}</div>
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>A couple of other thoughts:
Rough sketch:
const { useState } = React;
const LimitedTextWithReadMore = ({ text = "", limit }) => {
const [showMore, setShowMore] = useState(false);
if (text.length > limit) {
return (
<React.Fragment>
{showMore ? text : text.slice(0, limit)}{" "}
<button className="show-more" type="button" onClick={() => setShowMore((flag) => !flag)}>
{showMore ? "...read less" : "...read more"}
</button>
</React.Fragment>
);
} else {
return <React.Fragment>{text}</React.Fragment>;
}
};
const Example = () => {
return (
<div>
<div>
Limited: <LimitedTextWithReadMore text="abcdefghijklmnopqrstuvwxyz" limit={10} />
</div>
<div>
Unlimited: <LimitedTextWithReadMore text="abcde" limit={10} />
</div>
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);button.show-more {
border: none;
font-family: inherit;
font-weight: inherit;
background-color: transparent;
outline: none;
text-decoration: underline;
cursor: pointer;
}<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
