Simple React hook that allows you to determine whether an element is truncated via CSS or not.
Interested in working on projects like this? Close is looking for great engineers to join our team!
yarn add @closeio/use-is-truncatedimport 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;
}MIT © Close