react-ellipsis-text-x
v1.1.0
Published
React component which ellipsis text
Downloads
2
Maintainers
Readme
react-ellipsis-text
React text ellipsify component
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 displaylength
: Max length of texttail
: Trailing string (Default '...')tailClassName
: Trailing string element's class nametooltip
: Tooltip will be display when suppliedtooltip.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