@fringeworks/react-defer-rendering 0.8.0

package/useDeferUntilReady/useDeferUntilReady.cjs

@@ -0,0 +1,60 @@
+'use client';
+
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_constants = require('../constants.cjs');
+let _fringeworks_react_utils_hooks_useIsMounted = require("@fringeworks/react-utils/hooks/useIsMounted");
+_fringeworks_react_utils_hooks_useIsMounted = require_runtime.__toESM(_fringeworks_react_utils_hooks_useIsMounted, 1);
+let react = require("react");
+
+//#region src/useDeferUntilReady/useDeferUntilReady.tsx
+/**
+* ステートが'ready'になるまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param state ステート（'pending', 'ready', 'fallback'）
+* @param options オプション
+* @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
+*/
+function useDeferUntilReady(target, state, options = {}) {
+	const { pending, fallback, pendingDefer, fallbackDefer, readyDefer, preserveOnceFallback, preserveOnceReady } = options;
+	const latestStateRef = (0, react.useRef)(null);
+	const latestState = latestStateRef.current;
+	let currentState = state;
+	if (preserveOnceReady && latestState === require_constants.RenderingState.ready) currentState = latestState;
+	else if (preserveOnceFallback && latestState === require_constants.RenderingState.fallback) currentState = latestState;
+	latestStateRef.current = currentState;
+	const defer = {
+		pending: pendingDefer,
+		fallback: fallbackDefer,
+		ready: readyDefer
+	}[currentState];
+	const deferRef = (0, react.useRef)(defer);
+	deferRef.current = defer;
+	const [shownState, setShownState] = (0, react.useState)(() => defer == null ? currentState : null);
+	const isMounted = (0, _fringeworks_react_utils_hooks_useIsMounted.default)();
+	(0, react.useEffect)(() => {
+		const defer = deferRef.current;
+		if (defer == null) {
+			setShownState(currentState);
+			return;
+		} else {
+			const timeoutId = setTimeout(() => {
+				if (isMounted()) setShownState(currentState);
+			}, defer);
+			return () => {
+				clearTimeout(timeoutId);
+			};
+		}
+	}, [currentState]);
+	const node = shownState == null ? null : {
+		pending,
+		fallback,
+		ready: target
+	}[shownState];
+	return {
+		state: currentState,
+		node
+	};
+}
+
+//#endregion
+module.exports = useDeferUntilReady;

package/useDeferUntilReady/useDeferUntilReady.d.cts

@@ -0,0 +1,15 @@
+import { RenderingState } from "../constants.cjs";
+import { DeferRenderingResult } from "../types.cjs";
+import { UseDeferUntilReadyOptions } from "./types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilReady/useDeferUntilReady.d.ts
+/**
+ * ステートが'ready'になるまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param state ステート（'pending', 'ready', 'fallback'）
+ * @param options オプション
+ * @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
+ */
+declare function useDeferUntilReady<T extends ReactNode, P extends ReactNode = ReactNode, E extends ReactNode = ReactNode>(target: T, state: RenderingState, options?: UseDeferUntilReadyOptions<P, E>): DeferRenderingResult<T | P | E>;
+export = useDeferUntilReady;

package/useDeferUntilReady/useDeferUntilReady.d.mts

@@ -0,0 +1,16 @@
+import { RenderingState } from "../constants.mjs";
+import { DeferRenderingResult } from "../types.mjs";
+import { UseDeferUntilReadyOptions } from "./types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilReady/useDeferUntilReady.d.ts
+/**
+ * ステートが'ready'になるまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param state ステート（'pending', 'ready', 'fallback'）
+ * @param options オプション
+ * @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
+ */
+declare function useDeferUntilReady<T extends ReactNode, P extends ReactNode = ReactNode, E extends ReactNode = ReactNode>(target: T, state: RenderingState, options?: UseDeferUntilReadyOptions<P, E>): DeferRenderingResult<T | P | E>;
+//#endregion
+export { useDeferUntilReady as default };

package/useDeferUntilReady/useDeferUntilReady.mjs

@@ -0,0 +1,58 @@
+'use client';
+
+import { RenderingState } from "../constants.mjs";
+import useIsMounted from "@fringeworks/react-utils/hooks/useIsMounted";
+import { useEffect, useRef, useState } from "react";
+
+//#region src/useDeferUntilReady/useDeferUntilReady.tsx
+/**
+* ステートが'ready'になるまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param state ステート（'pending', 'ready', 'fallback'）
+* @param options オプション
+* @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
+*/
+function useDeferUntilReady(target, state, options = {}) {
+	const { pending, fallback, pendingDefer, fallbackDefer, readyDefer, preserveOnceFallback, preserveOnceReady } = options;
+	const latestStateRef = useRef(null);
+	const latestState = latestStateRef.current;
+	let currentState = state;
+	if (preserveOnceReady && latestState === RenderingState.ready) currentState = latestState;
+	else if (preserveOnceFallback && latestState === RenderingState.fallback) currentState = latestState;
+	latestStateRef.current = currentState;
+	const defer = {
+		pending: pendingDefer,
+		fallback: fallbackDefer,
+		ready: readyDefer
+	}[currentState];
+	const deferRef = useRef(defer);
+	deferRef.current = defer;
+	const [shownState, setShownState] = useState(() => defer == null ? currentState : null);
+	const isMounted = useIsMounted();
+	useEffect(() => {
+		const defer = deferRef.current;
+		if (defer == null) {
+			setShownState(currentState);
+			return;
+		} else {
+			const timeoutId = setTimeout(() => {
+				if (isMounted()) setShownState(currentState);
+			}, defer);
+			return () => {
+				clearTimeout(timeoutId);
+			};
+		}
+	}, [currentState]);
+	const node = shownState == null ? null : {
+		pending,
+		fallback,
+		ready: target
+	}[shownState];
+	return {
+		state: currentState,
+		node
+	};
+}
+
+//#endregion
+export { useDeferUntilReady as default };

package/useDeferUntilRender/index.cjs

@@ -0,0 +1,5 @@
+'use client';
+
+const require_useDeferUntilRender_useDeferUntilRender = require('./useDeferUntilRender.cjs');
+
+module.exports = require_useDeferUntilRender_useDeferUntilRender;

package/useDeferUntilRender/index.d.cts

@@ -0,0 +1,3 @@
+import { UseDeferUntilRenderOptions } from "./types.cjs";
+import useDeferUntilRender from "./useDeferUntilRender.cjs";
+export { type UseDeferUntilRenderOptions, useDeferUntilRender as default };

package/useDeferUntilRender/index.d.mts

@@ -0,0 +1,3 @@
+import { UseDeferUntilRenderOptions } from "./types.mjs";
+import useDeferUntilRender from "./useDeferUntilRender.mjs";
+export { type UseDeferUntilRenderOptions, useDeferUntilRender as default };

package/useDeferUntilRender/index.mjs

@@ -0,0 +1,5 @@
+'use client';
+
+import useDeferUntilRender from "./useDeferUntilRender.mjs";
+
+export { useDeferUntilRender as default };

package/useDeferUntilRender/types.d.cts

@@ -0,0 +1,25 @@
+import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.cjs";
+import { ReactNode, RefObject } from "react";
+
+//#region src/useDeferUntilRender/types.d.ts
+type UseDeferUntilRenderOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & {
+  /**
+   * 監視するコンテナーの参照\
+   * デフォルトはdocument（文書全体）
+   */
+  rootRef?: RefObject<Element | Document | null | undefined>;
+  /**
+   * DOM変更検知時のデバウンス時間（ミリ秒）
+   * デフォルトは100ms
+   * @default 100
+   */
+  detectionDelay?: number;
+  /**
+   * SSR時など、実際のエレメントの描画状態を判定できない環境での初期値\
+   * デフォルトはfalse
+   * @default false
+   */
+  initialCondition?: boolean;
+};
+//#endregion
+export { UseDeferUntilRenderOptions };

package/useDeferUntilRender/types.d.mts

@@ -0,0 +1,25 @@
+import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.mjs";
+import { ReactNode, RefObject } from "react";
+
+//#region src/useDeferUntilRender/types.d.ts
+type UseDeferUntilRenderOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & {
+  /**
+   * 監視するコンテナーの参照\
+   * デフォルトはdocument（文書全体）
+   */
+  rootRef?: RefObject<Element | Document | null | undefined>;
+  /**
+   * DOM変更検知時のデバウンス時間（ミリ秒）
+   * デフォルトは100ms
+   * @default 100
+   */
+  detectionDelay?: number;
+  /**
+   * SSR時など、実際のエレメントの描画状態を判定できない環境での初期値\
+   * デフォルトはfalse
+   * @default false
+   */
+  initialCondition?: boolean;
+};
+//#endregion
+export { UseDeferUntilRenderOptions };

package/useDeferUntilRender/types.mjs

@@ -0,0 +1 @@
+export {  };

package/useDeferUntilRender/useDeferUntilRender.cjs

@@ -0,0 +1,53 @@
+'use client';
+
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_useDeferUntilTrue_useDeferUntilTrue = require('../useDeferUntilTrue/useDeferUntilTrue.cjs');
+require('../useDeferUntilTrue/index.cjs');
+let react = require("react");
+let _fringeworks_utils_timer_debounce = require("@fringeworks/utils/timer/debounce");
+_fringeworks_utils_timer_debounce = require_runtime.__toESM(_fringeworks_utils_timer_debounce, 1);
+
+//#region src/useDeferUntilRender/useDeferUntilRender.tsx
+/**
+* セレクターに一致するエレメントが描画されるまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param query クエリセレクター（例: '.my-class'）（null/undefinedの場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready'）と状態に応じたノード
+*/
+function useDeferUntilRender(target, query, options = {}) {
+	const defaultRootRef = (0, react.useRef)(null);
+	const { rootRef = defaultRootRef, detectionDelay = 100, preserveOnceReady, initialCondition = false, ...opts } = options;
+	return require_useDeferUntilTrue_useDeferUntilTrue(target, (0, react.useSyncExternalStore)((0, react.useCallback)((onStoreChange) => {
+		if (!query) return () => {};
+		const root = rootRef.current ?? document;
+		if (preserveOnceReady && root.querySelector(query)) return () => {};
+		const handleMutation = () => {
+			onStoreChange();
+			if (preserveOnceReady && root.querySelector(query)) observer.disconnect();
+		};
+		const debouncedHandleMutation = (0, _fringeworks_utils_timer_debounce.default)(handleMutation, detectionDelay);
+		const observer = new MutationObserver(debouncedHandleMutation);
+		observer.observe(root, {
+			childList: true,
+			subtree: true
+		});
+		return () => {
+			observer.disconnect();
+		};
+	}, [
+		query,
+		rootRef.current,
+		detectionDelay,
+		preserveOnceReady
+	]), (0, react.useCallback)(() => {
+		if (!query) return true;
+		return (rootRef.current ?? document).querySelector(query) != null;
+	}, [query, rootRef.current]), (0, react.useCallback)(() => !query || initialCondition, [query, initialCondition])), {
+		preserveOnceReady,
+		...opts
+	});
+}
+
+//#endregion
+module.exports = useDeferUntilRender;

package/useDeferUntilRender/useDeferUntilRender.d.cts

@@ -0,0 +1,14 @@
+import { DeferRenderingResult } from "../types.cjs";
+import { UseDeferUntilRenderOptions } from "./types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilRender/useDeferUntilRender.d.ts
+/**
+ * セレクターに一致するエレメントが描画されるまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param query クエリセレクター（例: '.my-class'）（null/undefinedの場合は待たずに描画する）
+ * @param options オプション
+ * @returns state（'pending', 'ready'）と状態に応じたノード
+ */
+declare function useDeferUntilRender<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, query: string | null | undefined, options?: UseDeferUntilRenderOptions<P>): DeferRenderingResult<T | P>;
+export = useDeferUntilRender;

package/useDeferUntilRender/useDeferUntilRender.d.mts

@@ -0,0 +1,15 @@
+import { DeferRenderingResult } from "../types.mjs";
+import { UseDeferUntilRenderOptions } from "./types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilRender/useDeferUntilRender.d.ts
+/**
+ * セレクターに一致するエレメントが描画されるまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param query クエリセレクター（例: '.my-class'）（null/undefinedの場合は待たずに描画する）
+ * @param options オプション
+ * @returns state（'pending', 'ready'）と状態に応じたノード
+ */
+declare function useDeferUntilRender<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, query: string | null | undefined, options?: UseDeferUntilRenderOptions<P>): DeferRenderingResult<T | P>;
+//#endregion
+export { useDeferUntilRender as default };

package/useDeferUntilRender/useDeferUntilRender.mjs

@@ -0,0 +1,51 @@
+'use client';
+
+import useDeferUntilTrue from "../useDeferUntilTrue/useDeferUntilTrue.mjs";
+import "../useDeferUntilTrue/index.mjs";
+import { useCallback, useRef, useSyncExternalStore } from "react";
+import debounce from "@fringeworks/utils/timer/debounce";
+
+//#region src/useDeferUntilRender/useDeferUntilRender.tsx
+/**
+* セレクターに一致するエレメントが描画されるまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param query クエリセレクター（例: '.my-class'）（null/undefinedの場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready'）と状態に応じたノード
+*/
+function useDeferUntilRender(target, query, options = {}) {
+	const defaultRootRef = useRef(null);
+	const { rootRef = defaultRootRef, detectionDelay = 100, preserveOnceReady, initialCondition = false, ...opts } = options;
+	return useDeferUntilTrue(target, useSyncExternalStore(useCallback((onStoreChange) => {
+		if (!query) return () => {};
+		const root = rootRef.current ?? document;
+		if (preserveOnceReady && root.querySelector(query)) return () => {};
+		const handleMutation = () => {
+			onStoreChange();
+			if (preserveOnceReady && root.querySelector(query)) observer.disconnect();
+		};
+		const debouncedHandleMutation = debounce(handleMutation, detectionDelay);
+		const observer = new MutationObserver(debouncedHandleMutation);
+		observer.observe(root, {
+			childList: true,
+			subtree: true
+		});
+		return () => {
+			observer.disconnect();
+		};
+	}, [
+		query,
+		rootRef.current,
+		detectionDelay,
+		preserveOnceReady
+	]), useCallback(() => {
+		if (!query) return true;
+		return (rootRef.current ?? document).querySelector(query) != null;
+	}, [query, rootRef.current]), useCallback(() => !query || initialCondition, [query, initialCondition])), {
+		preserveOnceReady,
+		...opts
+	});
+}
+
+//#endregion
+export { useDeferUntilRender as default };

package/useDeferUntilResolved/index.cjs

@@ -0,0 +1,5 @@
+'use client';
+
+const require_useDeferUntilResolved_useDeferUntilResolved = require('./useDeferUntilResolved.cjs');
+
+module.exports = require_useDeferUntilResolved_useDeferUntilResolved;

package/useDeferUntilResolved/index.d.cts

@@ -0,0 +1,3 @@
+import { UseDeferUntilResolvedOptions } from "./types.cjs";
+import useDeferUntilResolved from "./useDeferUntilResolved.cjs";
+export { type UseDeferUntilResolvedOptions, useDeferUntilResolved as default };

package/useDeferUntilResolved/index.d.mts

@@ -0,0 +1,3 @@
+import { UseDeferUntilResolvedOptions } from "./types.mjs";
+import useDeferUntilResolved from "./useDeferUntilResolved.mjs";
+export { type UseDeferUntilResolvedOptions, useDeferUntilResolved as default };

package/useDeferUntilResolved/index.mjs

@@ -0,0 +1,5 @@
+'use client';
+
+import useDeferUntilResolved from "./useDeferUntilResolved.mjs";
+
+export { useDeferUntilResolved as default };

package/useDeferUntilResolved/types.d.cts

@@ -0,0 +1,7 @@
+import { UseDeferUntilReadyOptions } from "../useDeferUntilReady/types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilResolved/types.d.ts
+type UseDeferUntilResolvedOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilReadyOptions<P, E>;
+//#endregion
+export { UseDeferUntilResolvedOptions };

package/useDeferUntilResolved/types.d.mts

@@ -0,0 +1,7 @@
+import { UseDeferUntilReadyOptions } from "../useDeferUntilReady/types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilResolved/types.d.ts
+type UseDeferUntilResolvedOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilReadyOptions<P, E>;
+//#endregion
+export { UseDeferUntilResolvedOptions };

package/useDeferUntilResolved/types.mjs

@@ -0,0 +1 @@
+export {  };

package/useDeferUntilResolved/useDeferUntilResolved.cjs

@@ -0,0 +1,21 @@
+'use client';
+
+const require__usePromiseState = require('../_usePromiseState.cjs');
+const require_useDeferUntilReady_useDeferUntilReady = require('../useDeferUntilReady/useDeferUntilReady.cjs');
+require('../useDeferUntilReady/index.cjs');
+let react = require("react");
+
+//#region src/useDeferUntilResolved/useDeferUntilResolved.tsx
+/**
+* Promiseの完了まで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param promise プロミス（null/undefinedの場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
+*/
+function useDeferUntilResolved(target, promise, options = {}) {
+	return require_useDeferUntilReady_useDeferUntilReady(target, require__usePromiseState((0, react.useMemo)(() => promise ? () => promise : null, [promise])), options);
+}
+
+//#endregion
+module.exports = useDeferUntilResolved;

package/useDeferUntilResolved/useDeferUntilResolved.d.cts

@@ -0,0 +1,14 @@
+import { DeferRenderingResult } from "../types.cjs";
+import { UseDeferUntilResolvedOptions } from "./types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilResolved/useDeferUntilResolved.d.ts
+/**
+ * Promiseの完了まで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param promise プロミス（null/undefinedの場合は待たずに描画する）
+ * @param options オプション
+ * @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
+ */
+declare function useDeferUntilResolved<T extends ReactNode, P extends ReactNode = ReactNode, E extends ReactNode = ReactNode>(target: T, promise: Promise<unknown> | null | undefined, options?: UseDeferUntilResolvedOptions<P, E>): DeferRenderingResult<T | P | E>;
+export = useDeferUntilResolved;

package/useDeferUntilResolved/useDeferUntilResolved.d.mts

@@ -0,0 +1,15 @@
+import { DeferRenderingResult } from "../types.mjs";
+import { UseDeferUntilResolvedOptions } from "./types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilResolved/useDeferUntilResolved.d.ts
+/**
+ * Promiseの完了まで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param promise プロミス（null/undefinedの場合は待たずに描画する）
+ * @param options オプション
+ * @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
+ */
+declare function useDeferUntilResolved<T extends ReactNode, P extends ReactNode = ReactNode, E extends ReactNode = ReactNode>(target: T, promise: Promise<unknown> | null | undefined, options?: UseDeferUntilResolvedOptions<P, E>): DeferRenderingResult<T | P | E>;
+//#endregion
+export { useDeferUntilResolved as default };

package/useDeferUntilResolved/useDeferUntilResolved.mjs

@@ -0,0 +1,21 @@
+'use client';
+
+import usePromiseState from "../_usePromiseState.mjs";
+import useDeferUntilReady from "../useDeferUntilReady/useDeferUntilReady.mjs";
+import "../useDeferUntilReady/index.mjs";
+import { useMemo } from "react";
+
+//#region src/useDeferUntilResolved/useDeferUntilResolved.tsx
+/**
+* Promiseの完了まで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param promise プロミス（null/undefinedの場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
+*/
+function useDeferUntilResolved(target, promise, options = {}) {
+	return useDeferUntilReady(target, usePromiseState(useMemo(() => promise ? () => promise : null, [promise])), options);
+}
+
+//#endregion
+export { useDeferUntilResolved as default };

package/useDeferUntilScrolled/index.cjs

@@ -0,0 +1,5 @@
+'use client';
+
+const require_useDeferUntilScrolled_useDeferUntilScrolled = require('./useDeferUntilScrolled.cjs');
+
+module.exports = require_useDeferUntilScrolled_useDeferUntilScrolled;

package/useDeferUntilScrolled/index.d.cts

@@ -0,0 +1,3 @@
+import { UseDeferUntilScrolledOptions } from "./types.cjs";
+import useDeferUntilScrolled from "./useDeferUntilScrolled.cjs";
+export { type UseDeferUntilScrolledOptions, useDeferUntilScrolled as default };

package/useDeferUntilScrolled/index.d.mts

@@ -0,0 +1,3 @@
+import { UseDeferUntilScrolledOptions } from "./types.mjs";
+import useDeferUntilScrolled from "./useDeferUntilScrolled.mjs";
+export { type UseDeferUntilScrolledOptions, useDeferUntilScrolled as default };

package/useDeferUntilScrolled/index.mjs

@@ -0,0 +1,5 @@
+'use client';
+
+import useDeferUntilScrolled from "./useDeferUntilScrolled.mjs";
+
+export { useDeferUntilScrolled as default };

package/useDeferUntilScrolled/types.d.cts

@@ -0,0 +1,29 @@
+import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.cjs";
+import { ReactNode, RefObject } from "react";
+
+//#region src/useDeferUntilScrolled/types.d.ts
+type UseDeferUntilScrolledOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & {
+  /**
+   * 監視するコンテナーの参照
+   */
+  rootRef?: RefObject<Element | null | undefined>;
+  rootMargin?: number;
+  /**
+   * スクロールイベントのデバウンス時間（ミリ秒）
+   * デフォルトは100ms
+   * @default 100
+   */
+  detectionDelay?: number;
+  /**
+   * 検知するスクロールの方向
+   */
+  direction?: 'vertical' | 'horizontal';
+  /**
+   * SSR時など、実際のスクロール位置を判定できない環境での初期値\
+   * デフォルトはfalse
+   * @default false
+   */
+  initialCondition?: boolean;
+};
+//#endregion
+export { UseDeferUntilScrolledOptions };

package/useDeferUntilScrolled/types.d.mts

@@ -0,0 +1,29 @@
+import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.mjs";
+import { ReactNode, RefObject } from "react";
+
+//#region src/useDeferUntilScrolled/types.d.ts
+type UseDeferUntilScrolledOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & {
+  /**
+   * 監視するコンテナーの参照
+   */
+  rootRef?: RefObject<Element | null | undefined>;
+  rootMargin?: number;
+  /**
+   * スクロールイベントのデバウンス時間（ミリ秒）
+   * デフォルトは100ms
+   * @default 100
+   */
+  detectionDelay?: number;
+  /**
+   * 検知するスクロールの方向
+   */
+  direction?: 'vertical' | 'horizontal';
+  /**
+   * SSR時など、実際のスクロール位置を判定できない環境での初期値\
+   * デフォルトはfalse
+   * @default false
+   */
+  initialCondition?: boolean;
+};
+//#endregion
+export { UseDeferUntilScrolledOptions };

package/useDeferUntilScrolled/types.mjs

@@ -0,0 +1 @@
+export {  };