Skip to content

Commit 27886c1

Browse files
authored
docs(useSyncRef): add jsdoc (#7355)
1 parent 820806f commit 27886c1

File tree

1 file changed

+23
-0
lines changed

1 file changed

+23
-0
lines changed

packages/base/src/hooks/useSyncRef.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,29 @@
33
import type { MutableRefObject, Ref, RefCallback } from 'react';
44
import { useCallback, useRef } from 'react';
55

6+
/**
7+
* A hook that synchronizes an external ref (callback or object) with an internal ref.
8+
*
9+
* @example
10+
* ```tsx
11+
* const MyComponent = forwardRef<HTMLDivElement, PropTypes>((props, ref) => {
12+
* const [componentRef, localRef] = useSyncRef<HTMLDivElement>(ref);
13+
*
14+
* useEffect(() => {
15+
* // `localRef.current` is always the latest DOM node (or `null`)
16+
* console.log('current node:', localRef.current);
17+
* }, []);
18+
*
19+
* return <div ref={componentRef}>Hello World!</div>;
20+
* });
21+
* ```
22+
*
23+
* @returns [componentRef, localRef]
24+
* A tuple containing:
25+
* - `componentRef`: a stable callback ref to attach to React elements. When the node
26+
* updates, it will forward the node to the external `ref` and update the internal one.
27+
* - `localRef`: an internal, ref object that holds the latest node for synchronous reads.
28+
*/
629
export function useSyncRef<RefType = never>(
730
ref: Ref<RefType>,
831
): [RefCallback<RefType>, MutableRefObject<RefType | null>] {

0 commit comments

Comments
 (0)