Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/handtrix/use-unload-beacon

react typescript unload

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/handtrix/use-unload-beacon
Owner: HaNdTriX
License: mit
Created: 2022-08-04T08:56:15.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2022-08-04T10:12:10.000Z (over 2 years ago)
Last Synced: 2024-09-21T14:06:43.315Z (3 months ago)
Topics: react, typescript, unload
Language: TypeScript
Homepage:
Size: 4.88 KB
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: license

Awesome Lists containing this project

README

        # use-unload-beacon

![](https://badgen.net/badge/license/MIT/blue) ![](https://badgen.net/npm/types/tslib) ![](https://badgen.net/npm/v/use-unload-beacon) ![](https://badgen.net/bundlephobia/min/use-unload-beacon)

React hook that sends an HTTP POST request containing a small amount of data when a page gets fully unloaded.

## Install

```bash

$ npm install use-unload-beacon

```

## Usage

```js

import useUnloadBeacon from "use-unload-beacon";

export default function App() {

  useUnloadBeacon("/api/trackunload", () =>

    JSON.stringify({

      some: "data",

    })

  );

  return <>...>;

}

```

## API

### useUnloadBeacon(Url, BodyInit)

#### BodyInit

**Type:** `string`

#### BodyInit

**Type:** `string | ReadableStream | Blob | BufferSource | FormData | URLSearchParams`

or

**Type:** `(event: Event) => BodyInit`

## Docs

- [Browser Support](https://caniuse.com/?search=sendbeacon)

- [`navigator.sendBeacon`](https://developer.mozilla.org/de/docs/Web/API/Navigator/sendBeacon)

- [`unload_event`](https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event)

## License

The MIT License.

## Maintainers

- [Henrik Wenz](https://github.com/handtrix)