# @noxy/react-flex-ellipsis-text

> A component creating a flexbox element with the 'text-overflow: ellipsis' attribute and adds a tooltip to the text once it overflows.

Latest version **1.0.1** (published 2023-03-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @noxy/react-flex-ellipsis-text
pnpm add @noxy/react-flex-ellipsis-text
yarn add @noxy/react-flex-ellipsis-text
bun add @noxy/react-flex-ellipsis-text
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-03-12 |
| First published | 2023-01-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | oscelest |
| Maintainers | noxy |

## Links

- npm: https://www.npmjs.com/package/@noxy/react-flex-ellipsis-text
- Repository: https://github.com/oscelest/react-flex-ellipsis-text
- Homepage: https://github.com/oscelest/react-flex-ellipsis-text#readme
- Issues: https://github.com/oscelest/react-flex-ellipsis-text/issues
- npm.io page: https://npm.io/package/@noxy/react-flex-ellipsis-text

## Recent versions

- 1.0.1 (latest) — 2023-03-12
- 1.0.0 — 2023-01-12

## README

# react-flex-ellipsis-text

## Introduction

`react-flex-ellipsis-text` is a simple [React](https://reactjs.org/) functional component which renders a flexbox element containing text.
The text inside the element has the `text-overflow: ellipsis` CSS property applied to it, making it so that once it overflows, the text is turned into ellipsis.
This functionality does not work natively with flexbox and implements "the hack" necessary to make it function.

It also adds a tooltip title to the ellipsis text to reveal what the full text is past the ellipsis.

## Installation

To install run the following command:

```
npm install @noxy/react-flex-ellipsis-text@latest
```

Typescript types are already available in the library so no need to get external types.

## Usage

To use this library, simply import the function from the library and call it with the value you want converted to a boolean:

```typescript jsx
import {FlexEllipsisText} from "@noxy/react-flex-ellipsis-text";
import React, {HTMLProps} from "react";

function TestComponent(props: HTMLProps<HTMLDivElement>) {
  
  return (
    <FlexEllipsisText>
      Hello World
    </FlexEllipsisText>
  );
}
```

## Properties

### showTitle: boolean

Determines if the tooltip title should be shown once text overflows and becomes ellipsis.

**Default value:** true

## Styling

The following are a list of properties which are designated as important.
To preserve component functionality, these should not be changed.
If you do need to change them however, please be advised that the component might stop working as intended.

```css
.ellipsis-text {
  display: flex !important;
}

.ellipsis-text > span {
  min-width:     0 !important;
  text-overflow: ellipsis !important;
  white-space:   nowrap !important;
  overflow:      hidden !important;
}

```

---
_Source: https://npm.io/package/@noxy/react-flex-ellipsis-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._