Skip to main content

IsDocumentVisible

Track whether the current document is visible using the Page Visibility API.

IsDocumentVisible provides a reactive boolean that reflects the current document visibility state. It listens to the visibilitychange event and updates automatically.

Demo

Document visible: false

Became visible count: 0

Usage

		<script lang="ts">
  import { IsDocumentVisible } from "runed";
 
  const visible = new IsDocumentVisible();
</script>
 
<p>Document visible: {visible.current ? 'Yes' : 'No'}</p>

Type Definition

		type IsDocumentVisibleOptions = {
  window?: Window;
  document?: Document;
};
 
class IsDocumentVisible {
  constructor(options?: IsDocumentVisibleOptions)
  readonly current: boolean; // true when document is visible, false when hidden
}

Notes

  • Uses the Page Visibility API via document.hidden and visibilitychange.
  • In non-browser contexts, current defaults to false.