February 6th, 2022

React Hooks - useRef

#js

#react

#hooks

Its used to get a pointer to some element in the DOM. With this pointer you can do all your JS queries or other changes.

Simple Example

Suppose you want to show an element only when user scrolls to that element. And also make the element kind of slide in the screen.

Copy 📋

import { throttle } from "lodash";
import React, { useEffect, useRef, useState } from "react";

import { DivWrapper } from "./styles";

const SlidingComponent: React.FC = ({ children }) => {
  const inputRef = useRef<HTMLInputElement>(null);
  const [visible, changeVisible] = useState(false);

  const scrollListener = throttle(() => {
    if (!inputRef || !inputRef.current) {
      return;
    }
    const { clientHeight } = document.documentElement;
    // @ts-ignore
    const { top } = inputRef.current.getBoundingClientRect();
    const scrollPxFromBottom = clientHeight - top;

    if (scrollPxFromBottom > 20) {
      changeVisible(true);
      document.removeEventListener("scroll", scrollListener, true);
    }
  }, 200);

  useEffect(() => {
    scrollListener(); // initially without scroll even make some articles visible
    document.addEventListener("scroll", scrollListener, true);
    return () => document.removeEventListener("scroll", scrollListener, true);
  });

  return (
    <DivWrapper ref={inputRef} visible={visible}>
      {children}
    </DivWrapper>
  );
};

export default SlidingComponent;