# browser-tabs-event

> You can subcribe windows tab event when it closed, the first time app loaded, the first time tab loaded, or when all all tabs was closed

Latest version **0.1.10** (published 2021-08-01) · 0 weekly downloads

## Install

```sh
npm install browser-tabs-event
pnpm add browser-tabs-event
yarn add browser-tabs-event
bun add browser-tabs-event
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.10 |
| Published | 2021-08-01 |
| First published | 2021-08-01 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 13 |
| Unpacked size | 38 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Trung Ho Ngoc |
| Maintainers | trunghn |
| Keywords | react, tabs event, window tabs event, typescript, close tab |

## Links

- npm: https://www.npmjs.com/package/browser-tabs-event
- Repository: https://github.com/trunghongoc/browser-tabs-event
- Homepage: https://github.com/trunghongoc/browser-tabs-event#readme
- Issues: https://github.com/trunghongoc/browser-tabs-event/issues
- npm.io page: https://npm.io/package/browser-tabs-event

## Dependencies (13)

- [uuid](https://npm.io/package/uuid.md) ^8.3.2
- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [typescript](https://npm.io/package/typescript.md) ^4.3.5
- [web-vitals](https://npm.io/package/web-vitals.md) ^1.1.2
- [@types/jest](https://npm.io/package/@types/jest.md) ^26.0.24
- [@types/react](https://npm.io/package/@types/react.md) ^17.0.15
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^17.0.9
- [broadcast-channel](https://npm.io/package/broadcast-channel.md) ^4.0.0
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.2.7
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.14.1
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.8.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.10 (latest) — 2021-08-01
- 0.1.9 — 2021-08-01
- 0.1.8 — 2021-08-01
- 0.1.7 — 2021-08-01
- 0.1.6 — 2021-08-01
- 0.1.5 — 2021-08-01
- 0.1.4 — 2021-08-01
- 0.1.3 — 2021-08-01
- 0.1.1 — 2021-08-01
- 0.1.0 — 2021-08-01

## README

# Detect Browser's Tab Events

You can subscribe window tabs event with following support functions:

- `handleOnFirstTimeLoadApp`

  - All tab was closed (or the first time load application in current browser)
    - If you close all tabs, then access again, it's mean you are access at the first time

- `handleOnFirstTimeLoadTab`

  - First time load tab

- `handleOnUnMountTab`
  - Handle on a tab is closing

TS way

```tsx
import { BrowserTabsEvent } from 'browser-tabs-event'

const App: FC = (): JSX.Element => {
  // first time load app
  const handleOnFirstTimeLoadApp: any = (
    tabId: string,
    isFirstTimeLoadApp: boolean
  ): void => {}

  // first time load tab
  const handleOnFirstTimeLoadTab: any = (
    tabId: string,
    isFirstTimeLoadTab: boolean
  ): void => {}

  // handle on unmount tab
  const handleOnUnMountTab = (tabId: string): void => {}

  // ...
  return (
    <BrowserTabsEvent
      handleOnFirstTimeLoadApp={handleOnFirstTimeLoadApp}
      handleOnFirstTimeLoadTab={handleOnFirstTimeLoadTab}
      handleOnUnMountTab={handleOnUnMountTab}
    />
  )
}
```

JS way

```jsx
import { BrowserTabsEvent } from 'browser-tabs-event'

const App = () => {
  // first time load app
  const handleOnFirstTimeLoadApp = (tabId, isFirstTimeLoadApp) => {}

  // first time load tab
  const handleOnFirstTimeLoadTab = (tabId, isFirstTimeLoadTab) => {}

  // handle on unmount tab
  const handleOnUnMountTab = tabId => {}

  // ...
  return (
    <BrowserTabsEvent
      handleOnFirstTimeLoadApp={handleOnFirstTimeLoadApp}
      handleOnFirstTimeLoadTab={handleOnFirstTimeLoadTab}
      handleOnUnMountTab={handleOnUnMountTab}
    />
  )
}
```

## Setting

```
npm i -s browser-tabs-event
```

---
_Source: https://npm.io/package/browser-tabs-event · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._