1.0.1 • Published 9 years ago
react-text-trail v1.0.1
react-text-trail
Text trailing component for ReactJS.
Source: https://github.com/trevorsenior/react-text-trail
Install: npm install --save react-text-trail
What is it?
Provides a component that contains text given to it. If that text is larger than the component, then it will add a trailing element to indicate that there is more content that is not visible.
Properties
- text: What text should appear in this component?
- endOnWord: Should we trail off after a complete word, or break mid-word? (default:
false
). - trail: A string (or component) to trail off with. By default
'…'
. - trailProps: Properties to pass into the trail if it's a component.
Usage
Basic
// Default
<TextTrail text="beep boop" />
// Trail off on a complete word
<TextTrail text="beep boop" endOnWord={true} />
// Use a custom trail string (instead of `'…'`)
<TextTrail text={text} trail="(>^_^)>" />
Advanced
You can provide your own trail component that will render at the end of the content. It can be a "more..." button / etc. It should render inline as it will sit at the end of the text.
For an example, view the example directory.