Spaces:

Zhitomir
/

chat

Runtime error

chat / client /src /hooks /useScrollToRef.ts

chat init

aa2e6af over 2 years ago

1.18 kB

import { RefObject, useCallback } from 'react';
import throttle from 'lodash/throttle';

type TUseScrollToRef = {
  targetRef: RefObject<HTMLDivElement>;
  callback: () => void;
  smoothCallback: () => void;
};

export default function useScrollToRef({ targetRef, callback, smoothCallback }: TUseScrollToRef) {
  const logAndScroll = (behavior: 'instant' | 'smooth', callbackFn: () => void) => {
    // Debugging:
    // console.log(`Scrolling with behavior: ${behavior}, Time: ${new Date().toISOString()}`);
    targetRef.current?.scrollIntoView({ behavior });
    callbackFn();
  };

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const scrollToRef = useCallback(
    throttle(() => logAndScroll('instant', callback), 250, { leading: true }),
    [targetRef],
  );

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const scrollToRefSmooth = useCallback(
    throttle(() => logAndScroll('smooth', smoothCallback), 750, { leading: true }),
    [targetRef],
  );

  const handleSmoothToRef: React.MouseEventHandler<HTMLButtonElement> = (e) => {
    e.preventDefault();
    scrollToRefSmooth();
  };

  return {
    scrollToRef,
    handleSmoothToRef,
  };
}

	import { RefObject, useCallback } from 'react';
	import throttle from 'lodash/throttle';

	type TUseScrollToRef = {
	targetRef: RefObject<HTMLDivElement>;
	callback: () => void;
	smoothCallback: () => void;
	};

	export default function useScrollToRef({ targetRef, callback, smoothCallback }: TUseScrollToRef) {
	const logAndScroll = (behavior: 'instant' \| 'smooth', callbackFn: () => void) => {
	// Debugging:
	// console.log(`Scrolling with behavior: ${behavior}, Time: ${new Date().toISOString()}`);
	targetRef.current?.scrollIntoView({ behavior });
	callbackFn();
	};

	// eslint-disable-next-line react-hooks/exhaustive-deps
	const scrollToRef = useCallback(
	throttle(() => logAndScroll('instant', callback), 250, { leading: true }),
	[targetRef],
	);

	// eslint-disable-next-line react-hooks/exhaustive-deps
	const scrollToRefSmooth = useCallback(
	throttle(() => logAndScroll('smooth', smoothCallback), 750, { leading: true }),
	[targetRef],
	);

	const handleSmoothToRef: React.MouseEventHandler<HTMLButtonElement> = (e) => {
	e.preventDefault();
	scrollToRefSmooth();
	};

	return {
	scrollToRef,
	handleSmoothToRef,
	};
	}