KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #claude-code #codex #dsh #dsh-plugin #ai-agent #ai-agents #deepseek-harness #agent-skills #macos #cli

react-ellipsis-text

★ 32 Open GitHub ↗

React text ellipsify component

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fmobilusoss%2Freact-ellipsis-text.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fmobilusoss%2Freact-ellipsis-text?ref=badge_shield) [![codecov](https://codecov.io/gh/mobilusoss/react-ellipsis-text/branch/master/graph/badge.svg)](https://codecov.io/gh/mobilusoss/react-ellipsis-text)

[![NPM](https://nodei.co/npm/react-ellipsis-text.png)](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 (
      <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](https://github.com/mobilusoss/react-ellipsis-text/tree/develop/example)

```bash
npm install
npm run start:example
```

## Tests

```bash
npm run test:local
```

## License
[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fmobilusoss%2Freact-ellipsis-text.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fmobilusoss%2Freact-ellipsis-text?ref=badge_large)

react-ellipsis-text

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README