npm_versionnpm Paragon package page

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.

Any Paragon component or export may be added to the code example.