{"id":16791946,"url":"https://github.com/metonym/svelte-visibility-change","last_synced_at":"2025-03-22T01:30:31.045Z","repository":{"id":41110130,"uuid":"387274362","full_name":"metonym/svelte-visibility-change","owner":"metonym","description":"Detect browser page visibility changes using the Page Visibility API","archived":false,"fork":false,"pushed_at":"2023-06-13T17:14:21.000Z","size":198,"stargazers_count":22,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T06:51:23.733Z","etag":null,"topics":["blur","browser-tab","focus","page-visibility","svelte","svelte-component","typescript","visibility-change"],"latest_commit_sha":null,"homepage":"https://metonym.github.io/svelte-visibility-change","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metonym.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-18T21:42:19.000Z","updated_at":"2024-03-27T03:11:05.000Z","dependencies_parsed_at":"2024-10-28T12:17:22.463Z","dependency_job_id":"6b4e3947-d382-4b75-95a0-6b04ab8bfbdd","html_url":"https://github.com/metonym/svelte-visibility-change","commit_stats":{"total_commits":48,"total_committers":1,"mean_commits":48.0,"dds":0.0,"last_synced_commit":"a5a8a889cb45ad85ed3a497cad77f421928c0d4f"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-visibility-change","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-visibility-change/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-visibility-change/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-visibility-change/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metonym","download_url":"https://codeload.github.com/metonym/svelte-visibility-change/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244893303,"owners_count":20527564,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blur","browser-tab","focus","page-visibility","svelte","svelte-component","typescript","visibility-change"],"created_at":"2024-10-13T08:43:36.817Z","updated_at":"2025-03-22T01:30:31.022Z","avatar_url":"https://github.com/metonym.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-visibility-change\n\n[![NPM][npm]][npm-url]\n\n\u003e Detect browser page visibility changes using the [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API)\n\n\u003c!-- REPO_URL --\u003e\n\nUse this utility component and action to listen to browser page visibility changes.\n\nThe visibility state of a page can either be `visible` or `hidden`.\n\n**Use cases**\n\n- make a network request when the browser tab is focused\n- check for app UI updates when the tab is focused\n- play/pause audio when the tab is focused/blurred\n- pause expensive background computations when the tab is blurred\n\nTry it in the [Svelte REPL](https://svelte.dev/repl/a4b8bdb782514baaa7fa1cb26313b303).\n\n---\n\n\u003c!-- TOC --\u003e\n\n## Installation\n\n```sh\n# npm\nnpm i svelte-visibility-change\n\n# pnpm\npnpm i svelte-visibility-change\n\n# Yarn\nyarn add svelte-visibility-change\n\n# Bun\nbun add svelte-visibility-change\n```\n\n## Usage\n\n### Basic\n\nBind to the `state` prop to determine if the current tab is currently visible or hidden.\n\nIn the following example, switch to a different tab in the same browser window. The page title should change from \"visible\" to \"hidden.\"\n\n\u003c!-- render:Basic --\u003e\n\n```svelte\n\u003cscript\u003e\n  import VisibilityChange from \"svelte-visibility-change\";\n\n  let state; /** \"visible\" | \"hidden\" */\n\n  $: if (typeof window !== \"undefined\") {\n    document.title = state;\n  }\n\u003c/script\u003e\n\n\u003cVisibilityChange bind:state /\u003e\n```\n\n### visible / hidden\n\nYou can also bind to the boolean `visible` and `hidden` props.\n\n```svelte\n\u003cscript\u003e\n  import VisibilityChange from \"svelte-visibility-change\";\n\n  let visible; /** boolean */\n  let hidden; /** boolean */\n\u003c/script\u003e\n\n\u003cVisibilityChange bind:visible bind:hidden /\u003e\n```\n\n### `on:visible` / `on:hidden`\n\nAn alternative to binding to props is to listen to the `on:visible` and `on:hidden` dispatched events.\n\n\u003c!-- render:Events --\u003e\n\n```svelte\n\u003cscript\u003e\n  import VisibilityChange from \"svelte-visibility-change\";\n\n  let events = [];\n\u003c/script\u003e\n\n\u003cVisibilityChange\n  on:visible={() =\u003e (events = [...events, \"on:visible\"])}\n  on:hidden={() =\u003e (events = [...events, \"on:hidden\"])}\n/\u003e\n\n{events.join(\", \")}\n```\n\n### `on:change`\n\nThis component dispatches an `on:change` event whenever a [visibilitychange](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event) event occurs.\n\n**Note:** unlike `on:visible`, this event only fires when the page visibility changes _after the component has mounted._\n\n```svelte\n\u003cVisibilityChange\n  on:change={({ detail }) =\u003e {\n    console.log(detail.state); // \"visible\" | \"hidden\"\n    console.log(detail.visible); // boolean\n    console.log(detail.hidden); // boolean\n  }}\n/\u003e\n```\n\n### `visibilityChange` action\n\nAn alternative to the `VisibilityChange` component is the `visibilityChange` action.\n\nThe action only dispatches a \"change\" event with the same `event.detail` signature.\n\n```svelte\n\u003cscript\u003e\n  import { visibilityChange } from \"svelte-visibility-change\";\n\u003c/script\u003e\n\n\u003cdiv\n  use:visibilityChange\n  on:visibilitychange={({ detail }) =\u003e {\n    console.log(detail.state); // \"visible\" | \"hidden\"\n    console.log(detail.visible); // boolean\n    console.log(detail.hidden); // boolean\n  }}\n\u003e\n\u003c/div\u003e\n```\n\n## API\n\n### Props\n\n| Name    | Type                      | Default value |\n| :------ | :------------------------ | :------------ |\n| state   | `\"visible\"` or `\"hidden\"` | `undefined`   |\n| visible | `boolean`                 | `false`       |\n| hidden  | `boolean`                 | `false`       |\n\n### Dispatched Events\n\n- **on:visible**: fired if the page is visible\n- **on:hidden**: fired if the page visibility is hidden\n- **on:change**: fired when a page visibility event occurs, after the initial mount\n\n## Changelog\n\n[CHANGELOG.md](CHANGELOG.md)\n\n## License\n\n[MIT](LICENSE)\n\n[npm]: https://img.shields.io/npm/v/svelte-visibility-change.svg?style=for-the-badge\u0026color=%23ff3e00\n[npm-url]: https://npmjs.com/package/svelte-visibility-change\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetonym%2Fsvelte-visibility-change","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetonym%2Fsvelte-visibility-change","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetonym%2Fsvelte-visibility-change/lists"}