@closeio/use-is-truncated
v1.0.0
Published
Simple React hook that allows you to determine whether an element is truncated via CSS or not
Downloads
35
Maintainers
Keywords
Readme
use-is-truncated
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!
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