Add useIsIntersecting and useIsIntersectingState hooks #270

src/hooks/useIsIntersecting/useIsIntersecting.mdx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Hooks / useIsIntersecting" />
+
+# useIsIntersecting
+
+Please add a description about the `useIsIntersecting` hook.
+
+## Reference
+
+```ts
+function useIsIntersecting(): void;
+```
+
+### Parameters
+
+- `TODO` - Describe the parameters here.
+
+### Returns
+
+- `TODO` - Define the return value here.
+
+## Usage
+
+```tsx
+function DemoComponent() {
+  useIsIntersecting();
+  return <div></div>;
+}
+```

src/hooks/useIsIntersecting/useIsIntersecting.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ReactElement } from 'react';
+import { useIsIntersecting } from './useIsIntersecting.js';
+
+const meta = {
+  title: 'Hooks / useIsIntersecting',
+} satisfies Meta;
+
+type Story = StoryObj<typeof meta>;
+
+function DemoComponent(): ReactElement {
+  useIsIntersecting();
+
+  return (
+    <div>
+      <div className="alert alert-primary">
+        <h4 className="alert-heading">Instructions!</h4>
+        <p className="mb-0">Add instructions about the hook here.</p>
+      </div>
+      <div>
+        Value: <span className="badge rounded-pill bg-primary">{/* value */}</span>
+      </div>
+      <div className="card border-dark" data-ref="test-area">
+        <div className="card-header">Test Area</div>
+        <div className="card-body">
+          <p>TODO: Implement a test case for the hook.</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const Demo: Story = {
+  render() {
+    return <DemoComponent />;
+  },
+};

src/hooks/useIsIntersecting/useIsIntersecting.test.tsx

@@ -0,0 +1,11 @@
+import { renderHook } from '@testing-library/react';
+import { describe, it } from 'vitest';
+import { useIsIntersecting } from './useIsIntersecting.js';
+
+describe('useIsIntersecting', () => {
+  it('should not crash', async () => {
+    renderHook(() => {
+      return useIsIntersecting();
+    });
+  });
+});

src/hooks/useIsIntersecting/useIsIntersecting.ts

@@ -0,0 +1,23 @@
+import { RefObject, useRef, useState } from 'react';
+import { useIntersectionObserver } from '../useIntersectionObserver/useIntersectionObserver.js';
+
+/**
+ * @param targetOrTargets
+ * @param options
+ */
+export function useIsIntersecting(
+  targetOrTargets: RefObject<Element | ReadonlyArray<Element | null> | null>,
+  options?: IntersectionObserverInit,
+): RefObject<boolean> {
+  const isIntersectingRef = useRef(false);
+
+  useIntersectionObserver(
+    targetOrTargets,
+    (entries) => {
+      isIntersectingRef.current = entries.every((entry) => entry.isIntersecting);
+    },
+    options,
+  );
+
+  return isIntersectingRef;
+}

src/hooks/useIsIntersectingState/useIsIntersectingState.mdx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Hooks / useIsIntersectingState" />
+
+# useIsIntersectingState
+
+Please add a description about the `useIsIntersectingState` hook.
+
+## Reference
+
+```ts
+function useIsIntersectingState(): void;
+```
+
+### Parameters
+
+- `TODO` - Describe the parameters here.
+
+### Returns
+
+- `TODO` - Define the return value here.
+
+## Usage
+
+```tsx
+function DemoComponent() {
+  useIsIntersectingState();
+  return <div></div>;
+}
+```

src/hooks/useIsIntersectingState/useIsIntersectingState.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ReactElement } from 'react';
+import { useIsIntersectingState } from './useIsIntersectingState.js';
+
+const meta = {
+  title: 'Hooks / useIsIntersectingState',
+} satisfies Meta;
+
+type Story = StoryObj<typeof meta>;
+
+function DemoComponent(): ReactElement {
+  useIsIntersectingState();
+
+  return (
+    <div>
+      <div className="alert alert-primary">
+        <h4 className="alert-heading">Instructions!</h4>
+        <p className="mb-0">Add instructions about the hook here.</p>
+      </div>
+      <div>
+        Value: <span className="badge rounded-pill bg-primary">{/* value */}</span>
+      </div>
+      <div className="card border-dark" data-ref="test-area">
+        <div className="card-header">Test Area</div>
+        <div className="card-body">
+          <p>TODO: Implement a test case for the hook.</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const Demo: Story = {
+  render() {
+    return <DemoComponent />;
+  },
+};

src/hooks/useIsIntersectingState/useIsIntersectingState.test.tsx

@@ -0,0 +1,11 @@
+import { renderHook } from '@testing-library/react';
+import { describe, it } from 'vitest';
+import { useIsIntersectingState } from './useIsIntersectingState.js';
+
+describe('useIsIntersectingState', () => {
+  it('should not crash', async () => {
+    renderHook(() => {
+      return useIsIntersectingState();
+    });
+  });
+});

src/hooks/useIsIntersectingState/useIsIntersectingState.ts

@@ -0,0 +1,23 @@
+import { RefObject, useState } from 'react';
+import { useIntersectionObserver } from '../useIntersectionObserver/useIntersectionObserver.js';
+
+/**
+ * @param targetOrTargets
+ * @param options
+ */
+export function useIsIntersectingState(
+  targetOrTargets: RefObject<Element | ReadonlyArray<Element | null> | null>,
+  options?: IntersectionObserverInit,
+): boolean {
+  const [isIntersecting, setIsIntersecting] = useState(false);
+
+  useIntersectionObserver(
+    targetOrTargets,
+    (entries) => {
+      setIsIntersecting(() => entries.every((entry) => entry.isIntersecting));
+    },
+    options,
+  );
+
+  return isIntersecting;
+}

src/index.ts

@@ -18,6 +18,8 @@ export * from './hooks/useForceRerender/useForceRerender.js';
 export * from './hooks/useHasFocus/useHasFocus.js';
 export * from './hooks/useIntersectionObserver/useIntersectionObserver.js';
 export * from './hooks/useInterval/useInterval.js';
+export * from './hooks/useIsIntersecting/useIsIntersecting.js';
+export * from './hooks/useIsIntersectingState/useIsIntersectingState.js';
 export * from './hooks/useMediaDuration/useMediaDuration.js';
 export * from './hooks/useMediaQuery/useMediaQuery.js';
 export * from './hooks/useMutationObserver/useMutationObserver.js';