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.

Example Preview