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
refto 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.
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.