A React hook that can be used to determine whether an element is visible in the DOM. It returns an array with 2 elements:

• A boolean value whether the element is visible.
• A React ref to pass to the desired element.

Note that the element's visibility is determined by whether the element can be accessed by the browser in the current viewport. Elements hidden with opacity: 0; or visibility: hidden; are considered to be visible, whereas display: none; is considered to be not visible. The element is considered to be not visible when its hidden via a parent element's overflow: hidden; style.

Sample Usage#

In this example, a div is conditionally rendered based on the isHidden state value. When the button is clicked, the element's visibility is toggled. The returned boolean value of the element's visibility is displayed.

() => {
  const [isElementVisible, elementVisibleRef] = useIsVisible();
  const [isHidden, setIsHidden] = useState(false);

  const toggleElementVisibility = () => {
    setIsHidden(s => !s);
  };

  return (
    <>
      <div className="mb-3">
        <Button onClick={toggleElementVisibility} size="sm" className="mb-2">
          Toggle element visibility
        </Button>
        <p>Is element visible? {isElementVisible ? 'yes' : 'no'}</p>
      </div>
      <div ref={elementVisibleRef} className="p-1 border" style={{ display: isHidden ? 'none' : 'block' }}>
        Visible element
      </div>
    </>
  );
};