
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
read-more-react
Advanced tools
Read More + React is a simple npm component for react that "intelligently" truncates text at the appropriate point given a min, an ideal, and max text length. The idea is to cut off at the best point, and not just a specific character, cutting words short.
[Demo of Read More + React][demoSite] [demoSite]: http://www.alexandersmanning.com/read-more-react/
Read More + React is extraordinarily simple to use with react. You only need to add one prop, text.
npm install --save read-more-react
import ReadMoreReact from 'read-more-react';
<ReadMoreReact text={yourTextHere} />
Additional Parameters: You can customize the starting point (min), the ideal length (ideal), and the max length (max). The defaults for these are 80, 100, and 200 characters respectively.
Parameter | Default Value (characters) |
---|---|
min | 80 |
ideal | 100 |
max | 200 |
readMoreText | "read more" |
<ReadMoreReact text={yourTextHere}
min={minimumLength}
ideal={idealLength}
max={maxLength}
readMoreText={readMoreText}/>
Example:
npm install --save read-more-react
import ReadMoreReact from 'read-more-react';
class DemoClass extends React.Component {
render() {
return (
<ReadMoreReact text={yourTextHere}
min={minimumLength}
ideal={idealLength}
max={maxLength}
readMoreText="click here to read more"/>
)
}
}
The logic for truncation can all be found in the trimText file under source/utils. The trimText function can be imported, and takes 4 parameters: text (required), min (default: 80), ideal (default: 100), max (default: 200)
import trimText from './source/utils/trimText.js';
let textArray = trimText("this is some text", 10, 20, 100);
console.log(textArray[0]) //"this is some text";
console.log(textArray[1]) //""
My hope is to add more intelligent truncation through adding a weight to each punctuation mark based on average sentence breakdowns, to figure out when it is best to cut off a text block. A example of this would be giving more weight to a period than a comma, so that a period close to a comma (although further from the ideal), can become the cutoff point.
FAQs
A moderately intelligent truncation of text for react
The npm package read-more-react receives a total of 1,497 weekly downloads. As such, read-more-react popularity was classified as popular.
We found that read-more-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.