React text ellipsify component
Clone or download
Latest commit db9ccbf Nov 28, 2016
Permalink
Failed to load latest commit information.
example Remove tooltip Nov 28, 2016
lib/components Remove tooltip Nov 28, 2016
src/components Remove tooltip Nov 28, 2016
test/components
.babelrc Update node dependencies Nov 28, 2016
.editorconfig first commit Oct 15, 2015
.eslintignore first commit Oct 15, 2015
.eslintrc Update node dependencies Nov 28, 2016
.gitignore first commit Oct 15, 2015
.npmignore #4 Publish transpiled es2015 code Dec 8, 2015
.travis.yml Use node v6.x on Travis.ci Nov 28, 2016
CHANGELOG.md Remove tooltip Nov 28, 2016
LICENSE first commit Oct 15, 2015
README.md npm badge Nov 28, 2016
index.js first commit Oct 15, 2015
karma.conf.js Update node dependencies Nov 28, 2016
package.json Bump version Nov 28, 2016

README.md

react-ellipsis-text Build Status npm version

NPM React text ellipsify component

Demo

View Demo

Installation

npm install --save react-ellipsis-text

API

EllipsisText

Props

EllipsisText.propTypes = {
  text: React.PropTypes.string.isRequired,
  length: React.PropTypes.number.isRequired,
  tail: React.PropTypes.string,
  tailClassName: React.PropTypes.string,
  tooltip: React.PropTypes.shape({
    copyOnClick: React.PropTypes.bool,
    onAppear: React.PropTypes.func,
    onDisapepear: React.PropTypes.func
  })
};
  • text: Text to display

  • length: Max length of text

  • tail: Trailing string (Default '...')

  • tailClassName: Trailing string element's class name

  • tooltip: Tooltip will be display when supplied

  • tooltip.clipboard: Original text will be copied into clipboard when tooltip is clicked.

  • tooltip.onAppear: Called when tooltip is shown.

  • tooltip.onDisapepear: Called when tooltip is hidden.

Usage example

'use strict';

import React from 'react';
import EllipsisText  from 'react-ellipsis-text';

//allow react dev tools work
window.React = React;

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <EllipsisText text={'1234567890'} length={'5'} />
      </div>
    )
  }
};

React.render(<App/>, document.getElementById('out'));

// It will be
// <div>
//   <span><span>12</sapn><span class='more'>...</span></span>
//  </div>
//

See example

npm install
npm run start:example

Tests

npm run test:local