react-ellipsis-text

1.2.1 • Public • Published

react-ellipsis-text Build Status npm version codebeat badge

NPM React text ellipsify component

Demo

View Demo

Installation

npm install --save react-ellipsis-text

API

EllipsisText

Props

EllipsisText.propTypes = {
  text: PropTypes.string.isRequired,
  length: PropTypes.number.isRequired,
  tail: PropTypes.string,
  tailClassName: PropTypes.string,
  tooltip: PropTypes.shape({
    copyOnClick: PropTypes.bool,
    onAppear: PropTypes.func,
    onDisapepear: 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

Package Sidebar

Install

npm i react-ellipsis-text

Weekly Downloads

3,701

Version

1.2.1

License

MIT

Unpacked Size

3.01 MB

Total Files

18

Last publish

Collaborators

  • georgeosddev