npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-truncate-markup-eden

v2.0.5

Published

React component for truncating JSX markup

Downloads

3

Readme

React Truncate Markup

Travis version License

React component for truncating JSX markup.

Examples with code snippets
CodeSandbox demo

Why?

Few use cases for using JS truncating instead of the CSS one:

  • you need to support IE, Firefox or Edge (and cannot use webkit-line-clamp) for multi-line truncation
  • you need a custom ellipsis, potentially with more text (show more link, indicator of how many records were hidden by truncation, etc.)

Most solutions that already exist (like react-truncate or React-Text-Truncate) use HTML5 canvas (and its measureText method) for measuring text width to determine whether (and where) the provided text should be truncated.

While this approach is valid, it has its limitations - it works only for plain text, and not for JSX markup. You might want to use JSX when parts of the text have different style (like color or font-weight).

How?

Because we need to determine how to truncate provided content after all the layout and styles were applied, we need to actually render it in browser (instead of rendering it off-screen in canvas).

By using a binary search approach (splitting JSX in half and checking if the text + ellipsis fit the container, and if not, splitting it in half again, and so on), depending on the size (and depth) of the markup, it usually takes only a few rerenders to get the final, truncated markup.

Performance was not an issue for our use cases (e.g. using TruncateMarkup twice per list item in a dropdown list containing dozens of items), there is no text movement visible on the screen (but YMMV).

Note: Because this package depends on browser rendering, all elements inside <TruncateMarkup /> need to be visible. If you need to hide or show some parts of your UI, consider conditionally rendering them instead of setting display: none/display: block style on the elements.

Installation

npm install --save react-truncate-markup
# or
yarn add react-truncate-markup

This package also depends on react and prop-types. Please make sure you have those installed as well.

Importing:

// using ES6 modules
import TruncateMarkup from 'react-truncate-markup';

// using CommonJS modules
const TruncateMarkup = require('react-truncate-markup').default;

Or using script tags and globals:

<script src="https://unpkg.com/react-truncate-markup/umd/react-truncate-markup.min.js"></script>

And accessing the global variable:

const TruncateMarkup = ReactTruncateMarkup.default;

Usage

<div style={{ width: '200px' }}> {/* or any wrapper */}
  <TruncateMarkup lines={2}>
    <div>
      /* ... any markup ... */
      <span style={{ color: 'red' }}>
        <strong>{this.props.subject}:</strong>
      </span>
      {` `}
      {this.props.message}
    </div>
  </TruncateMarkup>
</div>

:warning: Warning

Only inlined DOM elements are supported when using this library. When trying to truncate React components (class or function), <TruncateMarkup /> will warn about it, skip truncation and display the whole content instead. For more details, please read this comment.

Props

children

It's required that only 1 element is passed as children.

Correct:

<TruncateMarkup>
  <div>
    /* ... markup ... */
  </div>
</TruncateMarkup>

Incorrect:

<TruncateMarkup>
  /* ... markup ... */
  <div>/* ... */</div>
  <div>/* ... */</div>
</TruncateMarkup>

lines

default value: 1

Maximum number of displayed lines of text.

ellipsis

default value: ...

Appended to the truncated text.

One of type: [string, JSX Element, function]

  • string: ...
  • JSX Element: <span>... <button>read more</button></span>
  • function: function(jsxElement) { /* ... */ }

Ellipsis callback function receives new (truncated) <TruncateMarkup /> children as an argument so it can be used for determining what the final ellipsis should look like.

const originalText = '/* ... */';

const wordsLeftEllipsis = (rootEl) => {
  const originalWordCount = originalText.match(/\S+/g).length;
  const newTruncatedText = rootEl.props.children;
  const currentWordCount = newTruncatedText.match(/\S+/g).length;

  return `... (+${originalWordCount - currentWordCount} words)`;
}

<TruncateMarkup ellipsis={wordsLeftEllipsis}>
  <div>
    {originalText}
  </div>
</TruncateMarkup>

lineHeight

default value: auto-detected

Numeric value for desired line height in pixels. Generally it will be auto-detected but it can be useful in some cases when the auto-detected value needs to be overridden.

onAfterTruncate

function(wasTruncated: bool) | optional

A callback that gets called after truncation. It receives a bool value - true if the input markup was truncated, false when no truncation was needed.

Contributing

Read more about project setup and contributing in CONTRIBUTING.md

License

Released under Apache-2.0 license.

Copyright © 2017-present Parsable Inc.