https://github.com/mobilusoss/react-ellipsis-text
React text ellipsify component
https://github.com/mobilusoss/react-ellipsis-text
react tooltip
Last synced: 11 months ago
JSON representation
React text ellipsify component
- Host: GitHub
- URL: https://github.com/mobilusoss/react-ellipsis-text
- Owner: mobilusoss
- License: mit
- Created: 2015-10-15T11:13:23.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T23:26:57.000Z (over 3 years ago)
- Last Synced: 2024-04-14T22:17:53.015Z (about 2 years ago)
- Topics: react, tooltip
- Language: JavaScript
- Homepage: http://mobilusoss.github.io/react-ellipsis-text
- Size: 2.24 MB
- Stars: 30
- Watchers: 2
- Forks: 15
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-ellipsis-text [](https://travis-ci.org/mobilusoss/react-ellipsis-text) [](http://badge.fury.io/js/react-ellipsis-text) [](https://codebeat.co/projects/github-com-mobilusoss-react-ellipsis-text-master) [](https://app.fossa.io/projects/git%2Bgithub.com%2Fmobilusoss%2Freact-ellipsis-text?ref=badge_shield) [](https://codecov.io/gh/mobilusoss/react-ellipsis-text)
[](https://nodei.co/npm/react-ellipsis-text/)
## 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
```
## License
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fmobilusoss%2Freact-ellipsis-text?ref=badge_large)