react-text-traildeprecated

Text trailing component for ReactJS.

Usage no npm install needed!

<script type="module">
  import reactTextTrail from 'https://cdn.skypack.dev/react-text-trail';
</script>

README

react-text-trail

Text trailing component for ReactJS.

Build Status

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