React-Truncate

Install

npm install react-truncate

Usage

import Truncate from 'react-truncate';

// ...

class Foo extends Component {
    render() {
        return (
            <Truncate lines={3} ellipsis={<span>... <a href='/link/to/article'>Read more</a></span>}>
                {longText}
            </Truncate>
        );
    }
}

Hint: (Generally with React) if you want to preserve newlines from plain text, you need to do as follows:

//...
    {text.split('\n').map((line, i, arr) => {
        const line = <span key={i}>{line}</span>;

        if (i === arr.length - 1) {
            return line;
        } else {
            return [line, <br key={i + 'br'} />];
        }
    })}
//...

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.	'...', <span>...</span>, <span>... <a href='#' onClick={someHandler}>Read more</a></span>, [<span key='some'>Some</span>, <span key='siblings'>siblings<span>]
children	string, React node		The text to be truncated. Anything that can be evaluated as text.	'Some text', <p>Some paragraph <a/>with other text-based inline elements<a></p>, <span>Some</span><span>siblings</span>
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

• 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

Integrated example for toggling "read more" text

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

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

        this.state = {};

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

    toggleLines(event) {
        event.preventDefault();

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

    render() {
        let { children, text, lines } = this.props;

        return (
            <Truncate
                lines={this.state.readMore && lines}
                ellipsis={(
                   <span>... <a href='#' onClick={this.toggleLines}>{text}</a></span>
                )}
            >
                {children}
            </Truncate>
        );
    }
}

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

ReadMore.propTypes = {
    children: PropTypes.node.isRequired,
    text: PropTypes.node,
    lines: PropTypes.number
};

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