DEV Community

loading...

useScroll() React TypeScript

brenonovelli profile image Breno Novelli ・1 min read

Esses dias precisei usar o custom hook useScroll() que já tinha usado em projeto JavaScript em outro projeto que está usando TypeScript. Esse foi o resultado. Se tiverem alguma sugestão de melhoria, é só falar.

useScroll.ts

import { useRef } from 'react';

export type UseScrollResult = [() => void, React.RefObject<HTMLDivElement>];

const useScroll = (): UseScrollResult => {
  const htmlElementRef = useRef<HTMLDivElement | null>(null);

  const executeScroll = () => {
    if (htmlElementRef && htmlElementRef.current) {
      const { offsetTop } = htmlElementRef.current;

      offsetTop && window.scrollTo(0, offsetTop - 32);
    }
  };

  return [executeScroll, htmlElementRef];
};

export { useScroll };

Enter fullscreen mode Exit fullscreen mode

ScrollComponent.tsx

import { useScroll } from 'hooks/useScroll';

const [executeScroll, htmlElRef] = useScroll();

const someActionAndScroll = () => {
    //...

    executeScroll();
  };

return (
<Container>
   <Header />
   <List />
   <TargetContainer ref={htmlElRef}>
</Container>
)
Enter fullscreen mode Exit fullscreen mode

O hook useScroll exporta uma função que executa o scroll [executeScroll] e uma referência que colocaremos no elemento alvo [htmlElRef].

Discussion (0)

Forem Open with the Forem app