feat(withEllipsisTypography): add watchResize props

Author: shijistar

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 # Changelog
 
+## 1.7.8
+
+2026-3-18
+
+### Features
+
+- **EllipsisText**, **EllipsisParagraph**, **EllipsisTitle**, **EllipsisLink**
+  - ✨ add `watchResize` prop to monitor component size and adjust ellipsis accordingly.
+
 ## 1.7.7
 
 2026-3-9

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiny-codes/react-easy",
-  "version": "1.7.7",
+  "version": "1.7.8",
   "description": "Simplify React and AntDesign development with practical components and hooks",
   "keywords": [
     "react",
@@ -46,6 +46,7 @@
     "crypto-js": "^4.2.0",
     "lexical": "^0.33.1",
     "react-contexify": "^6.0.0",
+    "react-resize-detector": "^12.3.0",
     "sockjs-client": "^1.6.1"
   },
   "devDependencies": {

package.json

@@ -6,14 +6,17 @@ import type { EllipsisConfig } from 'antd/es/typography/Base';
 import type { ParagraphProps } from 'antd/es/typography/Paragraph';
 import type { TextProps } from 'antd/es/typography/Text';
 import type { TitleProps } from 'antd/es/typography/Title';
+import { useResizeDetector } from 'react-resize-detector';
+import { useRefFunction, useRefValue } from '../../hooks';
 
 function withEllipsisTypography<T extends TextProps | ParagraphProps | TitleProps>(
   Component: ComponentType<MakeEllipsisTypographyProps<T>>
 ) {
   return function EllipsisText(props: MakeEllipsisTypographyProps<T>) {
-    const { ellipsis = true, children, text = children, ...rest } = props;
+    const { ellipsis = true, children, text = children, watchResize = true, ...rest } = props;
     const [isEllipsis, setIsEllipsis] = useState(false);
     const [dom, setDom] = useState<HTMLElement | null>(null);
+    const domRef = useRefValue(dom);
     const isAutoEllipsis = useMemo(() => ellipsis === true, [ellipsis]);
     const isAutoTooltip = useMemo(() => typeof ellipsis === 'object' && ellipsis.tooltip === true, [ellipsis]);
     const isAutoTooltipTitle = useMemo(
@@ -31,10 +34,22 @@ function withEllipsisTypography<T extends TextProps | ParagraphProps | TitleProp
     );
     const tooltipTitle = useMemo(() => (isEllipsis ? text : undefined), [isEllipsis, text]);
 
+    const detectEllipsis = useRefFunction(
+      () => dom && setIsEllipsis(dom.scrollWidth > dom.clientWidth || dom.scrollHeight > dom.clientHeight)
+    );
+    useResizeDetector({
+      targetRef: watchResize ? domRef : undefined,
+      onResize: detectEllipsis,
+      refreshRate: 10,
+      refreshOptions: {
+        leading: false,
+      },
+    });
+
     useEffect(() => {
       if (dom && isAuto) {
         Promise.resolve().then(() => {
-          setIsEllipsis(dom.scrollWidth > dom.clientWidth || dom.scrollHeight > dom.clientHeight);
+          detectEllipsis();
         });
       }
     }, [text, isAuto, dom]);
@@ -72,8 +87,24 @@ function withEllipsisTypography<T extends TextProps | ParagraphProps | TitleProp
 }
 
 export type MakeEllipsisTypographyProps<T> = Omit<T, 'children'> & {
+  /**
+   * - **EN:** The text content to display. If not provided, the children will be used.
+   * - **CN:** 要显示的文本内容。如果未提供，将使用子元素。
+   */
   text?: string | undefined;
+  /**
+   * - **EN:** The children content to display. The `text` prop will take precedence if both are
+   *   provided.
+   * - **CN:** 要显示的子元素内容。如果同时提供了 `text` 属性，将优先使用 `text`。
+   */
   children?: string | undefined | null;
+  /**
+   * - **EN:** Whether to monitor the component's size and adjust the ellipsis accordingly.
+   * - **CN:** 是否监控组件的大小并相应地调整省略号。
+   *
+   * @default true
+   */
+  watchResize?: boolean;
 };
 
 export default withEllipsisTypography;