@closeio/use-is-truncated

use-is-truncated

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

Check the live DEMO.

Interested in working on projects like this? Close is looking for great engineers to join our team!

Install

yarn add @closeio/use-is-truncated

Usage

Show a tooltip for elements that are truncated

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 = () => (
  <TooltipTruncated content="This is a label that is too long to show">
    <div className="MyLabel">This is a label that is too long to show</div>
  </TooltipTruncated>
);

.MyLabel {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

License

MIT © Close