Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/filipchalupa/react-use-pwa-install

hook pwa react

Last synced: 3 months ago
JSON representation

Host: GitHub
URL: https://github.com/filipchalupa/react-use-pwa-install
Owner: FilipChalupa
License: isc
Created: 2021-01-30T21:12:39.000Z (about 4 years ago)
Default Branch: main
Last Pushed: 2024-10-02T09:52:47.000Z (5 months ago)
Last Synced: 2024-11-05T18:57:48.270Z (3 months ago)
Topics: hook, pwa, react
Language: JavaScript
Homepage: https://www.npmjs.com/package/react-use-pwa-install
Size: 186 KB
Stars: 4
Watchers: 3
Forks: 0
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # react-use-pwa-install [![npm](https://img.shields.io/npm/v/react-use-pwa-install.svg)](https://www.npmjs.com/package/react-use-pwa-install) ![npm type definitions](https://img.shields.io/npm/types/react-use-pwa-install.svg)

Custom React hook for PWA install button.

## Installation

```bash

npm install react-use-pwa-install

```

## How to use

```jsx

import { usePWAInstall } from 'react-use-pwa-install'

export const Header = () => {

	const install = usePWAInstall()

	return (

		

			
My app

			{install && Install}

		

	)

}

```

### Screencast

![UI example](https://raw.githubusercontent.com/FilipChalupa/pwa-install-handler/HEAD/screencast.gif)

### Demo

Check [website](https://react-use-pwa-install-demo.glitch.me/) or [code](https://glitch.com/edit/#!/react-use-pwa-install-demo).

## Note

Don't forget to fulfill PWA requirements ([web.dev](https://web.dev/install-criteria/), [mdn](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs)) otherwise the `usePWAInstall` will return `null`. Same goes for already installed app.