# react-ellipsis-text [![Build Status](https://travis-ci.org/mobilusoss/react-ellipsis-text.svg?branch=master)](https://travis-ci.org/mobilusoss/react-ellipsis-text) [![npm version](https://badge.fury.io/js/react-ellipsis-text.svg)](http://badge.fury.io/js/react-ellipsis-text) [![codebeat badge](https://codebeat.co/badges/8fcdee06-9bfd-437e-aa17-cbe335a28ac9)](https://codebeat.co/projects/github-com-mobilusoss-react-ellipsis-text-master) [![NPM](https://nodei.co/npm/react-ellipsis-text.png)](https://nodei.co/npm/react-ellipsis-text/) React text ellipsify component ## Demo [View Demo](http://mobilusoss.github.io/react-ellipsis-text/example/) ## Installation ```bash npm install --save react-ellipsis-text ``` ## API ### `EllipsisText` #### Props ```javascript 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 ```javascript "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 (

); } } React.render(, document.getElementById("out")); // It will be //

// 12... //

// ``` See [example](https://github.com/mobilusoss/react-ellipsis-text/tree/develop/example) ```bash npm install npm run start:example ``` ## Tests ```bash npm run test:local ```

	Stars	Issues	Version	Updated	Created
react-ellipsis-text	31	7	1.2.1	5 years ago	9 years ago
react-lines-ellipsis	590	32	0.15.4	7 months ago	7 years ago
react-text-truncate	324	24	0.19.0	2 years ago	9 years ago

react-ellipsis-text vs react-lines-ellipsis vs react-text-truncate

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past