feat: useInviewport result support disconnect

packages/hooks/src/useInViewport/__tests__/index.test.ts

@@ -78,4 +78,24 @@ describe('useInViewport', () => {
  unmount();
  expect(disconnect).toBeCalled();
  });
+
+ it('should disconnect when disconnect is called', async () => {
+ const { result } = renderHook(() => useInViewport(targetEl));
+ const calls = mockIntersectionObserver.mock.calls;
+ const [onChange] = calls[calls.length - 1];
+
+ act(() => {
+ onChange([{ targetEl, isIntersecting: true, intersectionRatio: 0.5 }]);
+ });
+ const [inViewport, ratio, disconnect] = result.current;
+ expect(inViewport).toBeTruthy();
+ expect(ratio).toBe(0.5);
+ disconnect();
+
+ act(() => {
+ onChange([{ targetEl, isIntersecting: false, intersectionRatio: 0 }]);
+ });
+ expect(inViewport).toBeTruthy();
+ expect(ratio).toBe(0.5);
+ });
 });

packages/hooks/src/useInViewport/index.en-US.md

@@ -56,3 +56,4 @@ More information refer to [Intersection Observer API](https://developer.mozilla.
 | ---------- | ---------------------------------------------------------------------------------------- | ------------------------ |
 | inViewport | Is visible | `boolean` \| `undefined` |
 | ratio | Current visible ratio, updated every time the node set by `options.threshold` is reached | `number` \| `undefined` |
+| disconnect | cancel watch subscription | `() => void` |

packages/hooks/src/useInViewport/index.ts

@@ -1,5 +1,5 @@
 import 'intersection-observer';
-import { useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import type { BasicTarget } from '../utils/domTarget';
 import { getTargetElement } from '../utils/domTarget';
 import useEffectWithTarget from '../utils/useEffectWithTarget';
@@ -13,11 +13,22 @@ export interface Options {
  callback?: CallbackType;
 }
 
+export type Result = [boolean | undefined, number | undefined, () => void] & {
+ inViewport?: boolean;
+ ratio?: number;
+ disconnect: () => void;
+};
+
 function useInViewport(target: BasicTarget | BasicTarget[], options?: Options) {
  const { callback, ...option } = options || {};
 
  const [state, setState] = useState<boolean>();
  const [ratio, setRatio] = useState<number>();
+ const ref = useRef<IntersectionObserver>();
+
+ const disconnect = useCallback(() => {
+ ref.current?.disconnect();
+ }, []);
 
  useEffectWithTarget(
  () => {
@@ -28,7 +39,7 @@ function useInViewport(target: BasicTarget | BasicTarget[], options?: Options) {
  return;
  }
 
- const observer = new IntersectionObserver(
+ ref.current = new IntersectionObserver(
  (entries) => {
  for (const entry of entries) {
  setRatio(entry.intersectionRatio);
@@ -42,17 +53,22 @@ function useInViewport(target: BasicTarget | BasicTarget[], options?: Options) {
  },
  );
 
- els.forEach((el) => observer.observe(el!));
+ els.forEach((el) => ref.current?.observe(el!));
 
- return () => {
- observer.disconnect();
- };
+ return disconnect;
  },
- [options?.rootMargin, options?.threshold, callback],
+ [options?.rootMargin, options?.threshold, callback, disconnect],
  target,
  );
 
- return [state, ratio] as const;
+ const result = [state, ratio, disconnect] as Result;
+
+ // Support object destructuring, by adding the specific values.
+ result.inViewport = result[0];
+ result.ratio = result[1];
+ result.disconnect = result[2];
+
+ return result;
 }
 
 export default useInViewport;

packages/hooks/src/useInViewport/index.zh-CN.md

@@ -56,3 +56,4 @@ const [inViewport, ratio] = useInViewport(
 | ---------- | ----------------------------------------------------------- | ------------------------ |
 | inViewport | 是否可见 | `boolean` \| `undefined` |
 | ratio | 当前可见比例，在每次到达 `options.threshold` 设置节点时更新 | `number` \| `undefined` |
+| disconnect | 取消观察 | `() => void` |