# @solid-primitives/visibility-observer

> Primitive to track page visibility

Latest version **2.0.1** (published 2022-06-09) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @solid-primitives/visibility-observer
pnpm add @solid-primitives/visibility-observer
yarn add @solid-primitives/visibility-observer
bun add @solid-primitives/visibility-observer
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2022-06-09 |
| First published | 2022-03-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1558 |
| Author | David Di Biase |
| Maintainers | thetarnav., lexlohr, davedbase |
| Keywords | page, visibility, solid, primitives |

## Links

- npm: https://www.npmjs.com/package/@solid-primitives/visibility-observer
- Repository: https://github.com/solidjs-community/solid-primitives
- Homepage: https://github.com/solidjs-community/solid-primitives/tree/main/packages/visibility-observer
- Issues: https://github.com/solidjs-community/solid-primitives/issues
- npm.io page: https://npm.io/package/@solid-primitives/visibility-observer

## Dependencies (1)

- [@solid-primitives/rootless](https://npm.io/package/@solid-primitives/rootless.md) ^1.1.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2022-06-09
- 2.0.0 — 2022-06-09
- 1.1.0 — 2022-04-14
- 1.0.0 — 2022-03-13

## README

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Visibility%20Observer" alt="Solid Primitives Visibility Observer">
</p>

# @solid-primitives/visibility-observer

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg?style=for-the-badge)](https://lerna.js.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/visibility-observer?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/visibility-observer)
[![size](https://img.shields.io/npm/v/@solid-primitives/visibility-observer?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/visibility-observer)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-3.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)

- [`createPageVisibility`](#createPageVisibility) - Creates a signal with a boolean value identifying the page visibility state
- [`usePageVisibility`](#usePageVisibility) - A [shared-root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSharedRoot) alternative.

## Installation

```
npm install @solid-primitives/visibility-observer
# or
yarn add @solid-primitives/visibility-observer
```

## `createPageVisibility`

Creates a signal with a boolean value identifying the page visibility state.

### How to use it

```ts
import { createPageVisibility } from "@solid-primitives/visibility-observer";

const visible = createPageVisibility();

createEffect(() => {
  visible(); // => boolean
});
```

## `usePageVisibility`

`usePageVisibility` is a [shared root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSharedRoot) primitive. It is providing the same signal as `createPageVisibility`, but the event-listener and the signal are shared between dependents, making it more optimized to use in multiple places at once.

### How to use it

```ts
import { usePageVisibility } from "@solid-primitives/visibility-observer";

const visible = usePageVisibility();

createEffect(() => {
  visible(); // => boolean
});
```

## Changelog

<details>
<summary><b>Expand Changelog</b></summary>

1.0.0

Initial commit of the visibility observer.

2.0.0

Rename `createPageVisibilityObserver` to `createPageVisibility` _(no longer exported as default)_

Add `usePageVisibility`

</details>

---
_Source: https://npm.io/package/@solid-primitives/visibility-observer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._