https://github.com/closeio/use-is-truncated

Simple React hook that allows you to determine whether an element is truncated via CSS or not
https://github.com/closeio/use-is-truncated

Last synced: about 1 month ago
JSON representation

Simple React hook that allows you to determine whether an element is truncated via CSS or not

• Host: GitHub
• URL: https://github.com/closeio/use-is-truncated
• Owner: closeio
• License: mit
• Created: 2021-06-28T08:13:02.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T20:14:37.000Z (almost 2 years ago)
• Last Synced: 2024-10-03T03:50:18.420Z (3 months ago)
• Language: JavaScript
• Size: 1.4 MB
• Stars: 2
• Watchers: 5
• Forks: 0
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-is-truncated

[![NPM](https://img.shields.io/npm/v/@closeio/use-is-truncated.svg)](https://www.npmjs.com/package/@closeio/use-is-truncated) [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-prettier-success)](https://prettier.io)

Simple React hook that allows you to determine whether an element is truncated via CSS or not.

[Check the live DEMO](https://closeio.github.io/use-is-truncated/).

### 

Interested in working on projects like this? [Close](https://close.com) is looking for [great engineers](https://jobs.close.com) to join our team!

## Install

```bash

yarn add @closeio/use-is-truncated

```

## Usage

### Show a tooltip for elements that are truncated

```jsx

import React from 'react';

import useIsTruncated from '@closeio/use-is-truncated';

const TooltipTruncated = ({ content, children }) => {

  const [ref, isTruncated] = useIsTruncated(children);

  return React.cloneElement(children, {

    ref,

    title: isTruncated ? content : null,

  });

};

const MyOverlyLongLabel = () => (

  

    
This is a label that is too long to show

  

);

```


```css

.MyLabel {

  width: 100px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

```

## License

MIT © [Close](https://github.com/closeio)