@d-matrix/utils 1.17.1 → 1.18.0

package/dist/react/index.d.ts

@@ -6,3 +6,4 @@ export * from './useCopyToClipboard';
 export * from './enhancedComponent';
 export * from './useDeepCompareRef';
 export * from './types';
+export * from './useForwardRef';

package/dist/react/index.js

@@ -6,3 +6,4 @@ export * from './useCopyToClipboard';
 export * from './enhancedComponent';
 export * from './useDeepCompareRef';
 export * from './types';
+export * from './useForwardRef';

package/dist/react/types.d.ts

@@ -1,2 +1,3 @@
-import type { ForwardRefExoticComponent } from 'react';
+import type { ForwardRefExoticComponent, NamedExoticComponent, ComponentPropsWithoutRef, ComponentPropsWithRef, RefAttributes, ElementType } from 'react';
+export declare type ComponentRef<T extends ElementType> = T extends NamedExoticComponent<ComponentPropsWithoutRef<T> & RefAttributes<infer Method>> ? Method : ComponentPropsWithRef<T> extends RefAttributes<infer Method> ? Method : never;
 export declare type InferRef<T> = T extends ForwardRefExoticComponent<infer Ref> ? Ref extends React.RefAttributes<infer RefElement> ? RefElement : never : never;

package/dist/react/useForwardRef.d.ts

@@ -0,0 +1,9 @@
+import { ForwardedRef } from 'react';
+/**
+ * https://stackoverflow.com/questions/66060217/i-cant-type-the-ref-correctly-using-useref-hook-in-typescript
+ * 解决 Property 'current' does not exist on type '(instance: HTMLInputElement | null) => void' TS类型错误
+ * @param ref
+ * @param initialValue
+ * @returns
+ */
+export declare const useForwardRef: <T>(ref: ForwardedRef<T>, initialValue?: any) => import("react").MutableRefObject<T>;

package/dist/react/useForwardRef.js

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+/**
+ * https://stackoverflow.com/questions/66060217/i-cant-type-the-ref-correctly-using-useref-hook-in-typescript
+ * 解决 Property 'current' does not exist on type '(instance: HTMLInputElement | null) => void' TS类型错误
+ * @param ref
+ * @param initialValue
+ * @returns
+ */
+export const useForwardRef = (ref, initialValue = null) => {
+    const targetRef = useRef(initialValue);
+    useEffect(() => {
+        if (!ref)
+            return;
+        if (typeof ref === 'function') {
+            ref(targetRef.current);
+        }
+        else {
+            ref.current = targetRef.current;
+        }
+    }, [ref]);
+    return targetRef;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@d-matrix/utils",
   "sideEffects": false,
-  "version": "1.17.1",
+  "version": "1.18.0",
   "description": "A dozen of utils for Front-End Development",
   "main": "dist/index.js",
   "scripts": {

package/readme.md

@@ -164,6 +164,20 @@ const Parent = () => {
 };
 ```
 
+- `useForwardRef = <T>(ref: ForwardedRef<T>, initialValue: any = null): React.MutableRefObject<T>`
+
+解决使用`React.forwardRef`后，在调用`ref.current.someMethod()`时, 出现`Property 'current' does not exist on type '(instance: HTMLInputElement | null) => void'` TS类型错误，具体问题见[这里](https://stackoverflow.com/questions/66060217/i-cant-type-the-ref-correctly-using-useref-hook-in-typescript)
+
+```ts
+const Input = React.forwardRef<HTMLInputElement, React.ComponentPropsWithRef<'input'>>((props, ref) => {
+  const forwardRef = useForwardRef<HTMLInputElement>(ref);
+  useEffect(() => {
+    forwardRef.current.focus();
+  });
+  return <input type="text" ref={forwardRef} value={props.value} />;
+});
+```
+
 ### dom
 
 - `scrollToTop(element: Element | null | undefined): void`