---
title: 'useIsVisible'
type: 'hook'
categories:
- Hooks
components:
- useIsVisible
status: 'Stable'
designStatus: 'Done'
devStatus: 'Done'
notes: ''
---

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.

```jsx live
() => {
  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>
    </>
  );
};
```
