alexandersmanning / read-more-react

A moderately intelligent read more module for React

Read More + React

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/

How to Use

With React

Read More + React is extraordinarily simple to use with react. You only need to add one prop, text.

Install and Import

npm install --save read-more-react
import ReadMoreReact from 'read-more-react';

Use

<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"/>
		) 
	}
}

Without React

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]) //""

Future Steps

More Intelligent Truncation

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.

read-more-react's Issues

Allow 'readMoreText' to accept react components rather than strings

Hi guys!

I am wondering if it is possible for you guys to let 'readMoreText' accept react components as props rather than strings?

Although it does allow me to pass a react element as the 'readMoreText' props, it is still showing me this error:

index.js:1 Warning: Failed prop type: Invalid prop readMoreText of type object supplied to ReadMoreReact, expected string.

Thank You!

hiding text

Hello. Can you please tell me, is the property to hide the text, after disclosure, not provided?
Thank you very much for the module

Text is not changing even if the props passed to it changes.

{
              description && <ReadMore
                text={description}
                min={80}
                ideal={100}
                max={200}
                readMoreText="See more"
              />
  }

Even if the props value description is changing the text displayed is older once.
And when I reload the page it is displaying it correctly.

"Read More" Text

Ability to change the Read More text to another language through props?

TypeError: text.slice is not a function

Find below:

const minimumLength = 50;
const idealLength = 60;
const maxLength = 70;

const Description = (props) => {
    const desc = props.description;

ReadMoreReact 
                text={desc}
				min={minimumLength}
				ideal={idealLength}
				max={maxLength}
				readMoreText="read more"/>
}

text not visible in source in case of SSR

I am doing Server Side rendering of the page, the text other than this have no issue but the text wrap inside this component not visible in 'view page source' and ultimately hamper SEO. any solutions?

read more text styling

How to custom style readMoreText="read more"

Custom styling

Hi, any idea to custom style? Example the font-color

Question. CSS styling

Hello
Trying to style this text.
Tried

• inline styles
• Defining styles.text
• Using various selector combinations
• adding a className to read more
• putting a p tag around read more

etc.
Somehow the text color doesn't respond.
Perhaps there is a way I haven't thought of?
Thanks.

React 16 support (remove React.Proptypes)

I am receiving

Uncaught TypeError: Cannot read property 'string' of undefined

when using this lib with react 16.

this Pull request will fix it I think
#1

Read more text is not highlighted

I am using this library in semantic-ui-react. The "read more" text is not highlighted. It is just looking like a plain text. So it is unidentified with the content text and user cannot identify it.

Your library is fantastic. Please tell me a way to handle it.

No className attribute present

It doesn't have a className/style attribute.
<TextView text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat" className={someClassName} min={80} ideal={100} max={200} readMoreText="See more" />

Support for typescript

Vs-code is throwing error

Styling the "read more" button

Is there a way to style the read more button? For example, changing the color of the text, changing the cursor on hover, etc.

Append '...' to truncated text

Hey, is it possible to add a '...' to the end of the truncated text?

For example, if this sentence was cut off partway through, it might look something like this:

For example, if this sentence was cut off partway through, it might...

I tried adding an ::after selector with content: '...' in various ways but I don't see a way of actually adding the text to the end of the sentence.

dangerouslySetInnerHTML possible?

Hey, I'm currently pulling text from WordPress via an ACP WYSISYG field. I've been using dangerouslySetInnerHTML to display the text without HTML.

Is there a way to do this while using read-more-react?

Thx

`text` could/should be as children

Hiding the text when clicking

Hello,

When clicking the text for the first time, it shows it like a charm. 💯

But when clicking the full text (the second time after showing it), it hides it!

Now suppose I want to copy the text, when I select the text to be copied, it hides it, and I can't copy it. a better way would be to add "Read less" functionality or a flag to enable/disable the hiding functionality.

Thanks :D

Next line OR HTML text rendering

There should be a way to render HTML or ability to render text in a component with the next line.

Current scenario:

If I pass text with next line it won't render with the next line it will display whole content in line.

Proposed scenario:

1. There should be an option to pass HTML to the component so that it can render rich text with breakpoints etc.

2. Or component should parse text with the next line.