[IMPL] useScrollIntoView hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useReducedMotion/UseReducedMotion.tsx

@@ -0,0 +1,16 @@
+import { useReducedMotion } from "../../../../../../packages/react-tools/src"
+
+/**
+The component display user preferences about reducing motion.
+ */
+export const UseReducedMotion = () => {
+	const value = useReducedMotion();
+
+	return <>
+		<p
+			style={{ color: value ? "red" : "rgb(152, 195, 121)"}}
+		>
+			{value ? 'You prefer to reduce motion' : 'You prefer not to reduce motion'}
+		</p>
+	</>
+}

apps/react-tools-demo/src/components/hooks/useScrollIntoView/UseScrollIntoView.tsx

@@ -0,0 +1,24 @@
+import { useScrollIntoView } from "../../../../../../packages/react-tools/src";
+
+export const UseScrollIntoView = () => {
+	const { scroll, targetRef } = useScrollIntoView<HTMLParagraphElement, HTMLDivElement>({
+		scrollableElement: ()=>document.querySelector('.container') as HTMLDivElement
+	});
+
+	return (
+		<div>
+			<button
+				onClick={()=>scroll('start')}
+			>
+				Scroll to target
+			</button>
+			<div
+				style={{
+					width: '100%',
+					height: '50vh',
+				}}
+			/>
+			<p ref={targetRef}>Hello there</p>
+		</div>
+	);
+}

apps/react-tools-demo/src/constants/components.ts

@@ -57,7 +57,8 @@ export const COMPONENTS = [
 			"useIntersectionObserver",
 			"useMutationObserver",
 			"useMeasure",
-			"useVisible"
+			"useVisible",
+			"useScrollIntoView"
 		],
 		//API DOM
 		[
@@ -72,6 +73,7 @@ export const COMPONENTS = [
 			"useClipboard",
 			"useMediaQuery",
 			"useColorScheme",
+			"useReducedMotion",
 			"useTitle",
 			"useIdle",
 			"useFullscreen"

apps/react-tools-demo/src/markdown/useReducedMotion.md

@@ -0,0 +1,38 @@
+# useReducedMotion
+Hook to detect if user prefers to reduce motion.
+
+## Usage
+
+```tsx
+export const UseReducedMotion = () => {
+	const value = useReducedMotion();
+
+	return <>
+		<p
+			style={{ color: value ? "red" : "rgb(152, 195, 121)"}}
+		>
+			{value ? 'You prefer to reduce motion' : 'You prefer not to reduce motion'}
+		</p>
+	</>
+}
+```
+
+> The component display user preferences about reducing motion.
+
+
+## API
+
+```tsx
+useReducedMotion (): boolean 
+```
+
+> ### Params
+>
+>
+>
+
+> ### Returns
+>
+> __result__: it is true if user prefers reduced motion, otherwise it is false.
+> - _boolean_  
+>

apps/react-tools-demo/src/markdown/useScrollIntoView.md

@@ -0,0 +1,68 @@
+# useScrollIntoView
+
+
+## Usage
+
+```tsx
+
+export const UseScrollIntoView = () => {
+	const { scroll, targetRef } = useScrollIntoView<HTMLParagraphElement, HTMLDivElement>({
+		scrollableElement: ()=>document.querySelector('.container') as HTMLDivElement
+	});
+
+	return (
+		<div>
+			<button
+				onClick={()=>scroll('start')}
+			>
+				Scroll to target
+			</button>
+			<div
+				style={{
+					width: '100%',
+					height: '50vh',
+					backgroundColor: 'lightblue',
+				}}
+			/>
+			<p ref={targetRef}>Hello there</p>
+		</div>
+	);
+}
+```
+
+
+
+
+## API
+
+```tsx
+useScrollIntoView <T extends Element, E extends Element | null = null>({ duration = 1000, axis = "y", animation = easeInOutSine, offset = 0, cancelable = false, onFinish, scrollableElement }: { duration?: number, axis?: "x" | "y", animation?: (t: number) => number, offset?: number, cancelable?: boolean, onFinish?: () => void, scrollableElement: (()=>E)|E|React.RefObject<E|null> }): { targetRef: React.MutableRefObject<T | null>, scroll: (alignment?: "start" | "center" | "end") => void, cancel: () => void } 
+```
+
+> ### Params
+>
+> - __param__: _Object_
+> - __param.duration=1000?__: _number_  
+animation duration in milliseconds.
+> - __param.axis="x"?__: _"x"|"y"_  
+scrolling axis.
+> - __param.animation=easeInOutSine?__: _(t:number)=>number_  
+easing animation function. Refer to [https://easings.net/](https://easings.net/).
+> - __param.offset=0?__: _number_  
+additional distance.
+> - __param.cancelable=false?__: _boolean_  
+to establish if animation can be interrupted by user scroll.
+> - __param.onFinish?__: _()=>void_  
+callback to be executed when animation ends.
+> - __param.scrollableElement?__: _(()=>E)|E|React.RefObject<E|null>_  
+scrollable parent element, ref or function that returns element.
+>
+
+> ### Returns
+>
+> __result__: a __targetRef__ to target element, a __scroll__ function to start scrolling, a __cancel__ function to cancel scrolling.
+> - __Object__:  
+>     - __targetRef__ : _React.MutableRefObject<T|null>_  
+>     - __scroll__ : _(alignment?: "start"|"center"|"end")=>void_  
+>     - __cancel__ : _()=>void_  
+>

apps/react-tools-demo/src/markdown/useVisible.md

@@ -5,30 +5,33 @@ Hook to know if an element is visible and optionally the visible area ration of
 
 ```tsx
 export const UseVisible = () => {
-	const [cbRef, isVisible, ratio] = useVisible({withRatio: true});
+	const [cbRef, isVisible, ratio] = useVisible({
+		threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+		withRatio: true
+	});
 	return (
 		<div>
-			<div style={{ width: 300, height: 300, overflow: 'scroll', border: '1px solid' }}>
-				scroll here
+			<div style={{ marginTop: 16, color: ratio === 1 ? '#98c379' : ratio === 0 ? '#e46962' : '#d2c04c' }}>
+				<p>isVisible: {isVisible ? 'visible' : 'hidden'}</p>
+				<p>ratio: {ratio}</p>
+			</div>
+			<div style={{ margin: 'auto', width: 300, height: 300, overflow: 'scroll', border: '1px solid' }}>
+				<p>scrollable div</p>
 				<div style={{ height: 800 }}>
 					<div
 						ref={cbRef}
 						style={{
 							border: '1px solid',
+							margin: '320px auto 0px',
 							height: 100,
 							width: 100,
 							textAlign: 'center',
-							marginTop: 80,
 						}}
 					>
-						observer dom
+						bordered div
 					</div>
 				</div>
 			</div>
-			<div style={{ marginTop: 16, color: ratio ? '#87d068' : '#f50' }}>
-				<p>isVisible: {isVisible ? 'visible' : 'hidden'}</p>
-				<p>ratio: {ratio}</p>
-			</div>
 		</div>
 	);
 }

packages/react-tools/README.md

@@ -60,7 +60,7 @@
 	- [x] useMutationObserver
 	- [x] useMeasure
 	- [x] useVisibile
-	- [ ] useScrollIntoView
+	- [x] useScrollIntoView
 	- [ ] useMouse
 	- [ ] useLongPress
 	- [ ] useKeysEvents
@@ -84,6 +84,7 @@
 	- [x] useClipboard
 	- [x] useMediaQuery
 	- [x] useColorScheme
+	- [x] useReducedMotion
 	- [x] useTitle (change document.title but also document.head.title nodeElement)
 	- [x] useIdle
 	- [x] useFullscreen (check browser compatibility)

packages/react-tools/src/hooks/index.ts

@@ -55,4 +55,6 @@ export { useIdle } from './useIdle';
 export { useRaf } from './useRaf';
 export { useMeasure } from './useMeasure';
 export { useFullscreen } from './useFullscreen';
-export { useVisible } from './useVisible';
+export { useVisible } from './useVisible';
+export { useReducedMotion } from './useReducedMotion';
+export { useScrollIntoView } from './useScrollIntoView';

packages/react-tools/src/hooks/useClickOutside.ts

@@ -24,7 +24,7 @@ const isClickInside = (node: HTMLElement | null, target: Node | null) => {
  */
 export const useClickOutside = (target: RefObject<HTMLElement> | HTMLElement, handler: (evt: Event) => void):void => {
 	const listener = useCallback((e: Event) => {
-		const element = (target as RefObject<HTMLElement>).current
+		const element = (target as RefObject<HTMLElement>)?.current
 			? (target as RefObject<HTMLElement>).current
 			: target as HTMLElement;
 		if (!isClickInside(element, e.target as Node)) {

packages/react-tools/src/hooks/useClipboard.ts

@@ -128,7 +128,7 @@ function useClipboard({ useValue, dataType, target }: { useValue: boolean, dataT
 		useCallback(notif => {
 			notifRef.current = notif;
 			const element = target
-				? (target as RefObject<HTMLElement>).current
+				? (target as RefObject<HTMLElement>)?.current
 					? (target as RefObject<HTMLElement>).current
 					: target as HTMLElement
 				: document;