Need help with react-truncate?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

pablosichert
488 Stars 103 Forks ISC License 190 Commits 40 Opened issues

Description

React component for truncating multi-line spans and adding an ellipsis

Services available

!
?

Need anything else?

Contributors list

No Data

React-Truncate

NPM version Downloads Build status Coverage status Dependency status Dev dependency status

Sponsorship

Thanks to our sponsors for supporting the maintenance of this package! You can check out their product below:

Sponsorship banner via GitAds

Install

$ npm install react-truncate

Usage

import Truncate from 'react-truncate';

// ...

class Foo extends Component { render() { return ( ... Read more}> {longText} ); } }

Hint: (Generally with React) if you want to preserve newlines from plain text, you need to do as follows: ```js //... {text.split('\n').map((line, i, arr) => { const line = {line};

    if (i === arr.length - 1) {
        return line;
    } else {
        return [line, 
]; } })}

//... ```

API

| Prop | Type | Default | Description | Example | | ---- | ---- | ------- | ----------- | ------- | | lines | integer, boolean {false} |

1
| Specifies how many lines of text should be preserved until it gets truncated.
false
and any integer < 1 will result in the text not getting clipped at all. | (
false
,
-1
,
0
),
1
, ... | | ellipsis | string, React node |
'…'
| An ellipsis that is added to the end of the text in case it is truncated. |
'...'
,
...
,
... Read more
,
[Some, siblings]
| children | string, React node | | The text to be truncated. Anything that can be evaluated as text. |
'Some text'
,

Some paragraph with other text-based inline elements

,
Somesiblings
| | trimWhitespace | boolean |
false
| If
true
, whitespace will be removed from before the ellipsis (e.g.
words ...
will become
words...
instead) | | | width | number |
0
| If not
0
, the calculation of the content will be based on this number. | | | onTruncate | function | | Gets invoked on each render. Gets called with
true
when text got truncated and ellipsis was injected, and with
false
otherwise. |
isTruncated => isTruncated !== this.state.isTruncated && this.setState({ isTruncated })
|

Known issues

  • Resize content when the size of parent container changed (use the
    width
    property or call
    ref.onResize()
    ). See issue
  • Text exceeding horizontal boundaries when "viewport" meta tag is not set accordingly for mobile devices (font boosting leads to wrong calculations). See issue
  • Output in plain text only - no support for markup/HTML. See issue
  • Wrong line breaks when custom font is loading after the component has rendered. See issue
  • No support for letter spacing / word spacing. See issue

Integrated example for toggling "read more" text

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Truncate from 'react-truncate';

class ReadMore extends Component { constructor(...args) { super(...args);

    this.state = {
        expanded: false,
        truncated: false
    };

    this.handleTruncate = this.handleTruncate.bind(this);
    this.toggleLines = this.toggleLines.bind(this);
}

handleTruncate(truncated) {
    if (this.state.truncated !== truncated) {
        this.setState({
            truncated
        });
    }
}

toggleLines(event) {
    event.preventDefault();

    this.setState({
        expanded: !this.state.expanded
    });
}

render() {
    const {
        children,
        more,
        less,
        lines
    } = this.props;

    const {
        expanded,
        truncated
    } = this.state;

    return (
        <div>
            <truncate lines="{!expanded" ellipsis="{(">... <a href="https://github.com/pablosichert/react-truncate/blob/master/#" onclick="{this.toggleLines}">{more}</a>
                )}
                onTruncate={this.handleTruncate}
            &gt;
                {children}
            </truncate>
            {!truncated &amp;&amp; expanded &amp;&amp; (
                <span> <a href="https://github.com/pablosichert/react-truncate/blob/master/#" onclick="{this.toggleLines}">{less}</a></span>
            )}
        </div>
    );
}

}

ReadMore.defaultProps = { lines: 3, more: 'Read more', less: 'Show less' };

ReadMore.propTypes = { children: PropTypes.node.isRequired, lines: PropTypes.number, less: PropTypes.string, more: PropTypes.string };

export default ReadMore;

Developing

Install system libraries needed for development dependencies - https://github.com/Automattic/node-canvas#installation

Install development dependencies

$ npm install

Run tests

$ npm test

Run code linter

$ npm run lint

Compile to ES5 from /src to /lib

$ npm run compile

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.